CSS Adjacent Sibling Selectors

De naaste zusterkeuze渠izer (Adjacent sibling selector) kan elementen kiezen die direct na een ander element verschijnen en dat dezelfde ouder hebben.

Kies naaste zuster

Als je een element wilt kiezen dat direct na een ander element verschijnt en dat dezelfde ouder heeft, kun je de naaste zusterkeuze渠izer (Adjacent sibling selector) gebruiken.

Bijvoorbeeld, om de bovenspacing van de alinea te verhogen die direct na het h1 element verschijnt, kan het volgende worden geschreven:

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

Deze keuze渠izer wordt gelezen als: 'Kies de alinea die direct na de h1 element verschijnt, waarbij h1 en de p elementen dezelfde ouder hebben'.

Probeer het zelf

Grammaticale uitleg

De naaste zusterkeuze渠izer gebruikt een plus teken (+), dat staat voor de naaste zustercombinator (Adjacent sibling combinator).

Opmerking:Net als met de zustercombinator kan er een witte ruimte achter de naaste zustercombinator staan.

Bekijk het volgende fragment van de documentstructuur:

<div>
  <ul>
    <li>Item lijst 1</li>
    <li>Item lijst 2</li>
    <li>Item lijst 3</li>
  </ul>
  <ol>
    <li>Item lijst 1</li>
    <li>Item lijst 2</li>
    <li>Item lijst 3</li>
  </ol>
</div>

In het bovenstaande fragment bevat een div-element twee lijsten: een ongesorteerde lijst en een gesorteerde lijst, elke lijst bevat drie lijstitems. Deze lijsten zijn naaste broers, de lijstitems zelf zijn ook naaste broers. Echter, de lijstitems in de eerste lijst zijn niet naaste broers met de lijstitems in de tweede lijst, omdat deze两组 lijstitems niet tot dezelfde ouder-element behoren (ze kunnen hoogstens neefjes zijn).

Onthoud dat een combinator alleen de tweede van twee naaste broers kan kiezen. Zie onderstaande selector:

li + li {font-weight:bold;}

Deze selector zal alleen de tweede en derde lijstitems in de lijst vet maken. Het eerste lijstitem wordt niet beïnvloed.

Probeer het zelf

Combineren met andere selectors

De naaste broer combinator kan ook worden gecombineerd met andere combinatoren:

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

Deze selector wordt uitgelegd als: selecteer alle broer ul-elementen die direct na een table-element verschijnen, dat zich in een body-element bevindt, dat zelf een zoon van het html-element is.