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

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

Παράδειγμα

Ας απευθυνθούμε σε όλες τις ετικέτες 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;
}

Результат:

Πρακτικές Ασκήσεις

html<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li id="elem">5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

html<ul>
  <li>1</li>
  <li class="elem">2</li>
  <li>3</li>
  <li>4</li>
  <li class="elem">5</li>
  <li>6</li>
  <li>7</li>
  <li class="elem">8</li>
  <li>9</li>
</ul>