CSS adjacent sibling selector

Närmaste brorsvalshanteraren (Adjacent sibling selector) kan välja element som följer efter ett annat element, och dessa har samma föräldreelement.

Välj närmaste bror

Om du behöver välja element som följer efter ett annat element och som har samma föräldreelement, kan du använda närmaste brorsvalshanteraren (Adjacent sibling selector).

Om du vill öka övre marginalen för stycket som följer efter h1-elementet, kan du skriva det så här:

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

Denna valare läses som: "Välj stycke som följer efter h1-elementet, där h1 och p-elementen har samma föräldreelement."

Prova själv

Grammatikförklaring

Närmaste brorsvalshanteraren använder plusstecknet (+), dvs. närmaste brorscombinationen (Adjacent sibling combinator).

Kommentar:Liksom med bindestrecksoperatorer kan det finnas blanktecken bredvid närmaste brorscombinationer.

Se nedan denna dokumentstrukturbit:

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

I det ovanstående segmentet innehåller div-elementet två listor: en bullet lista och en numrerad lista, varje lista innehåller tre listelement. Dessa två listor är adjacenta bröder, och listelementen själva är också adjacenta bröder. Men listelementen i den första listan och de i den andra listan är inte adjacenta bröder, eftersom dessa två grupper av listelement inte tillhör samma föräldrelement (de kan högst vara kusiner).

Kom ihåg att en kombinator kan välja endast den andra elementet i två adjacenta bröder. Se på följande väljare:

li + li {font-weight:bold;}

Den här väljaren kommer bara att göra den andra och tredje listelementet i listan till fet. Det första listelementet påverkas inte.

Prova själv

Kombinera med andra väljare

Adjacency sibling combinator kan också kombineras med andra combinators:

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

Denna väljare förklaras som: Välj alla bröder ul-element som följer direkt efter en table-element, som är innehåll i en body-element, och body-elementet är en underkomponent av html-elementet.