Γειτονικός επιλογέας στο CSS

Ο γειτονικός επιλογέας + επιτρέπει την επιλογή ενός στοιχείου βάσει του αμέσως προηγούμενου γείτονά του.

Σύνταξη

cssεπιλογέας1 + επιλογέας2 {
  
}

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες p, που βρίσκονται αμέσως μετά τις ετικέτες h2, και ας τις χρωματίσουμε κόκκινες:

html<h2>κείμενο</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες p, που βρίσκονται αμέσως μετά από στοιχεία με την κλάση .test, και ας τις χρωματίσουμε κόκκινες:

html<p class="test">
  κείμενο
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

Παράδειγμα

Ας απευθυνθούμε σε όλα τα στοιχεία με την κλάση .elem, που βρίσκονται αμέσως μετά από στοιχεία με την κλάση .test, και ας τα χρωματίσουμε κόκκινα:

html<p class="test">
  κείμενο
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

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

Результат:

Δείτε επίσης