Selektory rodzeństwa w CSS

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Zanim przejdę do zaprezentowania właściwości oraz możliwości pracy na selektorach, chciałam przybliżyć tematykę rodzeństwa.

Co rozumiemy przez rodzeństwo?

Rodzeństwem są elementy, które posiadają wspólnego rodzica np:

W powyższym wypadku rodzicem dla h4, p i span jest div z class=”demo”. Oznacza to, że h4, p i span są w tym przykładzie rodzeństwem jako elementy potomne div.

Zapewne wielokrotnie spotykaliście się już z sytuacją gdy modyfikuje się cech elementów potomnych np. kiedy rozwijało się menu. To dość powszechne metody stosowane przy budowie stron. Dużo rzadziej jednak zdarza się nam spotkać operacje na rodzeństwie.

Chodzi głównie o sytuacje kiedy manipulujemy obiektem tylko w sytuacji kiedy inny określony obiekt jest jednym z jego rodzeństwa.

Jak możemy wykonywać operacje na rodzeństwie?

Głownie są 2 typy operacji jakie wykonujemy na rodzeństwie np:

Zastosowanie tego typu selektora spowoduje, że zmianie ulegną wszelkie <span> poprzedzone przez H4

Z kolei ten wpłynie tylko na jeden span poprzedzony przez H4 będzie zmodyfikowany

Poniżej możecie zobaczyć jak to działa w praktyce:

See the Pen
siblings
by Aura (@Julka85)
on CodePen.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *