Kurs HTML

Wprowadzenie: Wybieranie elementów na podstawie relacji

Podstawowe selektory (typu, klasy, ID) pozwalają wybierać pojedyncze elementy. Jednak często chcemy stylizować elementy w zależności od tego, gdzie znajdują się w strukturze dokumentu HTML (drzewie DOM) względem innych elementów.

Selektory potomków i dzieci pozwalają wybierać elementy, które są zagnieżdżone wewnątrz innych elementów.

Selektor potomka (spacja)

Selektor potomka, zapisywany jako **spacja** między dwoma selektorami (np. div p), wybiera wszystkie elementy pasujące do drugiego selektora (p), które są **potomkami** (na dowolnym poziomie zagnieżdżenia) elementu pasującego do pierwszego selektora (div).

Potomek to element znajdujący się wewnątrz innego elementu, niezależnie od tego, ile poziomów zagnieżdżenia ich dzieli.

<div class="container">
  <p>Paragraf 1 (bezpośrednie dziecko diva)</p>
  <section>
    <p>Paragraf 2 (wnuk diva)</p>
  </section>
  <p>Paragraf 3 (bezpośrednie dziecko diva)</p>
</div>
<p>Paragraf 4 (poza divem)</p>Kopiuj

/* Wybierz wszystkie paragrafy (p), które są potomkami diva */
div p {
  color: blue;
}

/* Wybierz wszystkie paragrafy (p), które są potomkami elementu */
/* z klasą .container */
.container p {
    font-weight: bold;
}
Kopiuj

W powyższym przykładzie:

• Reguła div p nada niebieski kolor Paragrafom 1, 2 i 3, ponieważ wszystkie znajdują się wewnątrz elementu div. Paragraf 4 nie zostanie wybrany.
• Reguła .container p pogrubi tekst Paragrafów 1, 2 i 3.

Można łączyć więcej selektorów potomków, np. body .main-content article p wybierze paragrafy będące potomkami elementu article, który jest potomkiem elementu z klasą .main-content, który jest potomkiem body.

Selektor dziecka (>)

Selektor dziecka, zapisywany jako znak większości (>) między dwoma selektorami (np. div > p), wybiera wszystkie elementy pasujące do drugiego selektora (p), które są **bezpośrednimi dziećmi** elementu pasującego do pierwszego selektora (div).

Bezpośrednie dziecko to element zagnieżdżony dokładnie jeden poziom niżej w drzewie DOM.

<!-- Użyjemy tego samego HTML co poprzednio -->
<div class="container">
  <p>Paragraf 1 (bezpośrednie dziecko diva)</p>
  <section>
    <p>Paragraf 2 (wnuk diva)</p>
  </section>
  <p>Paragraf 3 (bezpośrednie dziecko diva)</p>
</div>
<p>Paragraf 4 (poza divem)</p>Kopiuj

/* Wybierz wszystkie paragrafy (p), które są BEZPOŚREDNIMI DZIEĆMI diva */
div > p {
  text-decoration: underline;
}

/* Wybierz wszystkie paragrafy (p), które są BEZPOŚREDNIMI DZIEĆMI */
/* elementu z klasą .container */
.container > p {
    background-color: lightyellow;
}
Kopiuj

W powyższym przykładzie:

• Reguła div > p podkreśli tylko Paragrafy 1 i 3, ponieważ tylko one są bezpośrednimi dziećmi elementu div. Paragraf 2 (wnuk) i Paragraf 4 (poza divem) nie zostaną wybrane.
• Reguła .container > p nada żółte tło Paragrafom 1 i 3.

Selektor dziecka jest bardziej precyzyjny niż selektor potomka i jest przydatny, gdy chcemy stylizować tylko elementy na pierwszym poziomie zagnieżdżenia, unikając wpływu na głębiej zagnieżdżone elementy tego samego typu.

Łączenie selektorów

Selektory potomków i dzieci można dowolnie łączyć z innymi selektorami (klasami, ID, atrybutami, pseudoklasami itp.) oraz ze sobą nawzajem, aby tworzyć bardzo precyzyjne ścieżki wyboru elementów.

/* Wybierz linki (a) będące dziećmi elementów listy (li), */
/* które są potomkami elementu nawigacji (nav) z ID #main-menu */
nav#main-menu li > a {
  color: navy;
  text-decoration: none;
}

/* Wybierz elementy span z klasą .highlight, które są potomkami */
/* paragrafu (p) będącego dzieckiem diva z klasą .article-content */
div.article-content > p span.highlight {
  background-color: yellow;
}
Kopiuj