Dziedziczenie stylów CSS – selektory elementów, których prawdopodobnie nie znasz cz. 1


Front-end (html, css, js)

W stylach CSS występuje hierarchia. Podobnie jak w rodzinie – to rodzic decyduje o dziecku.
Oczywiście dziecko może mieć własne zdanie :)

Jak to wygląda w praktyce?

Przykład 1

W poniższym przykładzie każdy paragraf (p) wewnątrz rodzica w drodze hierarchii zdefiniowanych stylów CSS ma kolor czerwony.

To zachowanie znają chyba wszyscy, którzy poświęcili CSS dłużej niż 5 minut. Ale czy na tym koniec? Najlepsze dopiero przed nami…

<style>
  .rodzic p { color: red; }
</style>

<div class="rodzic">
  <p>Pierwszy paragraf</p>
    <div class="dziecko">
      <p>Drugi paragraf</p>
    </div>
  <p>Trzeci paragraf</p>
</div>
<p>Paragraf poza rodzicem</p>

Efekt:

Efekt 1

Przykład 2

W stylach CSS do hierarchii dodajemy znak większości. Oznacza on, że hierarchia musi się dokładnie zgadzać.

Czyli stylowanie dotyczy tylko bezpośrednich paragrafów w divie o klasie rodzic. Gdy w układzie pojawia się dodatkowy element jak div o klasie dziecko, konstrukcja .rodzic > p jej nie obejmie.

<style>
  .rodzic > p { color: red; }
</style>

<div class="rodzic">
  <p>Pierwszy paragraf</p>
    <div class="dziecko">
      <p>Drugi paragraf</p>
    </div>
  <p>Trzeci paragraf</p>
</div>
<p>Paragraf poza rodzicem</p>

Efekt:

Efekt 2

Przykład 3

Zamiast znaku większości użyjemy teraz plusa. Selektor + oznacza stylowanie elementu, który znajduje się bezpośrednio (w naszym przypadku) po divie. Taką konstrukcją ostylujemy każdy paragraf, który znajduje się bezpośrednio po zamknięciu diva.

<style>
  div + p { color: red; }
</style>

<div>
  <p>Pierwszy paragraf</p>
    <div>
      <p>Drugi paragraf</p>
    </div>
  <p>Trzeci paragraf</p>
  <p>Czwarty paragraf</p>
  <p>Piąty paragraf</p>
</div>
<p>Paragraf poza rodzicem</p>

Efekt:

Efekt 3

Przykład 4

Kolejny przykład, bliźniaczy do selektora plusa. Zamieniając plusa na tyldę otrzymamy efekt stylowania wszystkich elementów następujących po podanym, a nie tylko bezpośredniego jak to miało miejsce w poprzednim przykładzie.

<style>
  div ~ p { color: red; }
</style>

<div>
  <p>Pierwszy paragraf</p>
    <div>
      <p>Drugi paragraf</p>
    </div>
  <p>Trzeci paragraf</p>
  <p>Czwarty paragraf</p>
  <p>Piąty paragraf</p>
</div>
<p>Paragraf poza rodzicem</p>

Efekt:

Efekt 4

 

Podsumowanie

Jak widzisz hierarchia dziedziczenia w CSS kryje w sobie spore ułatwienia. Oczywiście to nie wszystko co czysty CSS potrafi. Oprócz selektorów elementów, są jeszcze selektory atrybutów, pseudo elementów i pseudo klas. Ale  nimi zajmiemy się za tydzień.