Vierekkäinen valitsin CSS:ssä

Vierekkäinen valitsin + mahdollistaa elementin valitsemisen sen yläpuolisen naapurin perusteella.

Syntaksi

cssvalitsin1 + valitsin2 {
  
}

Esimerkki

Kohdistetaan kaikkiin p-tageihin, jotka sijaitsevat välittömästi h2-tagien jälkeen, ja väritetään ne punaisella:

html<h2>teksti</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

Esimerkki

Kohdistetaan kaikkiin p-tageihin, jotka sijaitsevat välittömästi luokan .test elementtien jälkeen, ja väritetään ne punaisella:

html<p class="test">
  teksti
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

Esimerkki

Kohdistetaan kaikkiin luokan .elem elementteihin, jotka sijaitsevat välittömästi luokan .test elementtien jälkeen, ja väritetään ne punaisella:

html<p class="test">
  teksti
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

css.test + .elem {
  color: red;
}

Результат:

Katso myös