Selektory siostrzeńce CSS

Unikat bliźniaczy (Adjacent sibling selector) pozwala wybrać element, który pojawia się tuż po innym elemencie, a oba mają wspólnego rodzica.

Wybór bliźniaczego unikatu

Jeśli chcemy wybrać element, który pojawia się tuż po innym elemencie i mają oni wspólnego rodzica, można użyć unikatu bliźniaczego (Adjacent sibling selector).

Na przykład, aby zwiększyć górny margines akapitu, który pojawia się tuż po elemencie h1, można napisać:

h1 + p {margin-top:50px;}

Ten selektor można przeczytać jako: „Wybierz akapit, który pojawia się tuż po elemencie h1, gdzie h1 i p mają wspólnego rodzica”.

Spróbuj sam

Wyjaśnienie gramatyczne

Unikat bliźniaczy wyrażony jest znakiem plusa (+), tzn. unikatem bliźniaczego (Adjacent sibling combinator).

Komentarz:Jak i z unikatem potomka, obok unikatu bliźniaczego mogą być znaki białe.

Proszę spojrzeć na ten fragment drzewa dokumentu poniżej:

<div>
  <ul>
    <li>Element lista 1</li>
    <li>Element lista 2</li>
    <li>Element lista 3</li>
  </ul>
  <ol>
    <li>Element lista 1</li>
    <li>Element lista 2</li>
    <li>Element lista 3</li>
  </ol>
</div>

W powyższym fragmencie, element div zawiera dwie listy: listę wstępną i listę uporządkowaną, każda z nich zawiera trzy punkty listy. Te dwie listy są siostrzeńcami, a punkty listy również są siostrzeńcami. Jednak punkty listy z pierwszej listy i drugiej listy nie są siostrzeńcami, ponieważ te dwa zestawy punktów listy nie należą do tego samego rodzica (najwyżej można je nazwać kuzynami).

Pamiętaj, że jednym łączynerem można wybrać tylko drugi element dwóch sąsiadujących braci. Zobacz poniższy selektor:

li + li {font-weight:bold;}

W powyższym selektorze tylko drugi i trzeci element listy zostanie zmieniony na kursywę. Pierwszy element listy nie zostanie dotknięty.

Spróbuj sam

Kombinacja z innymi selektorami

Kombinacja相邻兄弟结合符还可以与其他结合符：

html > body table + ul {margin-top:20px;}

Ten selektor interpretowany jest jako: wybór wszystkich braci ul, które pojawiają się po elemencie table, który znajduje się w elemencie body, a sam element body jest dzieckiem elementu html.