Układanie tekstu i treści strony internetowej za pomocą kodu HTML to tylko jeden „kawałek” budowania front-end strony internetowej. Kolejną dużą częścią tego procesu jest tworzenie stylu wizualnego, którym rządzi zasady CSS.
Za każdym razem, gdy budujemy nową stronę internetową lub wprowadzamy poważne zmiany w układzie w istniejącej, nieuchronnie chcemy, aby określone części naszej witryny wyglądały w określony sposób. Aby to zrobić, ważne jest, aby zrozumieć, jak korzystać z różnych Kombinatory CSS, takie jak selektor potomka CSS. Ten kombinator CSS pozwala na jednoczesne otrzymywanie tych samych zmian stylu w dużych sekcjach witryny.
Co to jest selektor potomków CSS?
Selektor potomka CSS jest jednym z czterech różnych kombinatorów CSS. Dodając pojedynczą spację ( ) między dwoma selektorami, te same elementy stylu zostaną zastosowane również do drugiego selektora, biorąc pod uwagę, że potomkowie dzielą ten sam pierwszy selektor.
Aby zrozumieć selektor potomka CSS, najpierw musisz
zrozumieć selektory CSS. Najlepszym sposobem na opisanie selektora jest to, że jest to operator CSS, który identyfikuje fragment kodu HTML, który próbujesz ostylować. Nazywa się to selektorem, ponieważ „wybiera” dowolny fragment kodu HTML, który ma ten sam operator, co rodzic CSS.Typowe przykłady takich operatorów to:
div
Jest to tag definiujący sekcję HTML, która może zawierać takie elementy jak akapity i treść lub:
Li
który jest uporządkowaną listą. Innym podobnym tagiem jest:
ul
Tworzy to listę nieuporządkowaną. Bardziej złożone wzorce są również nazywane selektorami. Mówiąc prościej, selektor potomka CSS mówi witrynie, jak ma wyglądać, gdy jeden selektor jest „zagnieżdżony” pod wspólnym przodkiem.
Pierwszy selektor staje się rodzicem CSS lub selektorem „przodka”, a drugi selektor staje się potomkiem. Pomyśl o tym, jak działa katalog plików: element nadrzędny CSS jest jak folder zawierający inne foldery, które mogą zawierać własne foldery.
Spośród czterech kombinatorów jedynym, który wybiera wszystko, co jest zagnieżdżone pod określonym rodzicem CSS, jest selektor potomka CSS. Istnieją trzy inne kombinatory.
- Selektor podrzędny („>” zamiast pojedynczej spacji) wybiera tylko elementy, do których odwołuje się pierwszy selektor w kombinatorze. Jeśli pierwszym selektorem jest (div), a drugim selektorem jest (p), wybierane jest tylko (p), o ile ma (div) jako przodka. Jeśli akapit jest tworzony w nowej (sekcji), nawet jeśli znajduje się w tym samym (div), reguły stylów nie są zachowywane.
- Sąsiedni selektor rodzeństwa („+” zamiast pojedynczego odstępu) wybiera tylko element, który jest najbliżej drugiego selektora w kombinatorze. Jeśli pierwszym selektorem jest (div), a drugim selektorem (p), wybierany jest pierwszy element, który używa (p), ale nie (div).
- Ogólny selektor rodzeństwa („~” zamiast pojedynczej spacji) wybiera każdy element z wyjątkiem tych, do których odwołuje się drugi selektor. Jeśli pierwszym selektorem jest (div), a drugim selektorem (p), zostanie wybrany każdy element, który nie jest (p).
Jak wygląda selektor potomków CSS?
W poniższym przykładzie dwóch różnych selektorów potomków CSS działających obok siebie (div) is pierwszy selektor w pierwszym kombinatorze, podczas gdy (ul) jest pierwszym selektorem w drugim kombinator. W obu selektorach potomnych CSS, (p) jest używany jako drugi selektor.
Elementy stylu różnią się między (div) i (ul), ale (p) wyraźnie nosi cechy swojego rodzica CSS w obu przypadkach.
Dlaczego warto korzystać z selektora potomków CSS?
Aby zrozumieć znaczenie selektora potomka CSS, warto najpierw zapoznać się z zagnieżdżonymi selektorami CSS.
Ogólnie rzecz biorąc, chcemy, aby pewne reguły stylów były stosowane do całej witryny, takie jak określony rozmiar lub czcionka, której domyślnie używa cały tekst akapitu (p). Podobnie HTML może zacząć wyglądać niechlujnie, jeśli te reguły stylów zostaną zastosowane do każdego pojedynczego akapitu, a nie do całej witryny.
Zagnieżdżony CSS jest możliwy dzięki użyciu kombinatorów CSS, takich jak selektor potomków CSS. „Zagnieżdżając” CSS pod selektorem nadrzędnym, można szybko i skutecznie określić witrynę jak ma wyglądać konkretny selektor w każdym scenariuszu, do którego odnosi się rodzic CSS.
Korzystanie z zagnieżdżonego selektora CSS pozwala nam zastosować te same reguły do stylizacji wielu sekcji witryny naraz, co pozwala nam radzić sobie z mniejszym nakładem pracy przy jednoczesnym utrzymaniu czystego i nieskazitelnego kodu HTML.