Ο Αδελφικός Επιλογέας στο CSS

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

Σύνταξη

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

Παράδειγμα

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

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

cssh2 ~ p {
  color: red;
}

Результат:

Παράδειγμα

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

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

css.test ~ p {
  color: red;
}

Результат:

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης