Bez kategorii

Selektory rodzeństwa w CSS

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 na stronie internetowej?

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

<div class="demo">
  <h4>Nagłówek h4</h4>
  <span>Span</span>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <span>Span</span>
  <p>Lorem ipsum</p>
</div>

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:

h4 ~ span

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

h4 + span

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:

Selektory rodzeństwa w CSS
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago