Selektor potomka w CSS

Co to jest selektor potomka w CSS?

Selektor potomka pozwala wskazać elementy znajdujące się wewnątrz innego elementu, niezależnie od poziomu zagnieżdżenia. W zapisie używa się spacji między selektorami.

Przykład:

p img {
  border: 1px solid black;
}

Ten zapis oznacza: wybierz wszystkie elementy <img>, które znajdują się wewnątrz elementu <p>.

Jak to działa?

Selektor:

p img

nie wybiera akapitu <p>, tylko obrazy <img> będące jego potomkami. Obraz może być umieszczony bezpośrednio w akapicie albo głębiej, np. wewnątrz dodatkowego znacznika.

Przykład HTML:

<p>
  Tekst akapitu
  <img src="foto.jpg" alt="Zdjęcie">
</p>

W tym przypadku styl zostanie zastosowany do obrazka.

Różnica między podobnymi selektorami

• p img – wybiera obrazy wewnątrz akapitu
• p + img – wybiera obraz znajdujący się zaraz po akapicie
• p.img – wybiera element <p> o klasie img
• #id – odnosi się do elementu o konkretnym identyfikatorze

Kiedy używać?

Selektor potomka stosuje się wtedy, gdy chcesz nadać styl elementom tylko w określonym kontekście, np.:
- obrazom w akapitach,
- linkom w menu,
- elementom listy w konkretnym bloku strony.

Przykład praktyczny

article p img {
  max-width: 100%;
  height: auto;
}

Tutaj styl obejmie wszystkie obrazy znajdujące się w akapitach wewnątrz elementu <article>.

Najważniejsze do zapamiętania

• selektor potomka używa spacji,
• wskazuje elementy znajdujące się wewnątrz innych elementów,
• w pytaniu egzaminacyjnym poprawny zapis to p img.