CSS-lähimmät veljavelitsimet

Vierekkäisten veljien valitsija voi valita elementin, joka ilmestyy toisen elementin jälkeen ja joilla on yhteinen emo-elementti.

Valitse vierekkäiset veljekset

Jos haluat valita toisen elementin, joka ilmestyy toisen elementin jälkeen ja joilla on yhteinen emo-elementti, voit käyttää vierekkäisten veljien valitsijaa (Adjacent sibling selector).

Esimerkiksi, jos haluat lisätä h1-elementin jälkeen ilmestyvän kappaleen ylä reunan etäisyyden, voit kirjoittaa seuraavasti:

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

Tämä valitsija luetaan: "Valitse h1-elementin jälkeen ilmestyvä kappale, jolla h1- ja p-elementillä on yhteinen emo-elementti".

Kokeile itse

Kielentorjunta

Vierekkäisten veljien valitsija käyttää plussaa (+), eli vierekkäisten veljien yhdistäjää (Adjacent sibling combinator).

Huomautus:Kuten poikkeusmerkillä yhdistetyillä, vierekkäisten veljien yhdistäjän lähellä voi olla välilyöntejä.

Tarkastele seuraavaa asiakirjapuun osaa:

<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>

Yllä olevassa kohdassa div-elementissä on kaksi luetteloa: yksi epäjärjestetty luettelo ja yksi järjestetty luettelo, molemmissa luetteloissa on kolme luettelokohtaa. Molemmat luettelot ovat lähimmät veljet, luettelokohteet itsessään ovat myös lähimmät veljet. Mutta ensimmäisen luettelon kohteet eivät ole lähimmät veljet toisen luettelon kohteiden kanssa, koska nämä kaksi ryhmää eivät kuulu samaan isäelementtiin (ne voivat enintään olla setä-setä).

Muista, että yhdellä yhdistämismerkillä voidaan valita vain kaksi lähintä veljeä toisistaan. Katso seuraava valitsin:

li + li {font-weight:bold;}

Yllä oleva valitsin tekee listan toisen ja kolmannen luettelon kohteen粗体。Ensimmäinen luettelo kohta ei ole vaikuttanut.

Kokeile itse

Yhdistäminen muihin valitsimiin

Lähimmän veljivelitsimen kanssa voidaan käyttää myös muita yhdistämismerkkejä:

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

Tämä valitsin selitetään: valitaan kaikki sisäänrakennetut ul-elementit, jotka seuraavat table-elementtiä, ja jotka sijaitsevat body-elementissä, joka on html-elementin lapsi.