Επιλογές Κοντινών Ανάδελφων CSS

Ο επιλογέας γειτονικών αδελφών (Adjacent sibling selector) επιλέγει το στοιχείο που ακολουθεί έναν άλλο στοιχείο και έχουν τον ίδιο γονικό στοιχείο.

Επιλογή γειτονικών αδελφών

Αν χρειάζεται να επιλέξετε το στοιχείο που ακολουθεί έναν άλλο στοιχείο και έχουν τον ίδιο γονικό στοιχείο, μπορείτε να χρησιμοποιήσετε τον επιλογέα γειτονικών αδελφών (Adjacent sibling selector).

Για παράδειγμα, αν θέλετε να αυξήσετε το πάνω περιθώριο του παρακείμενου στοιχείου μετά το στοιχείο h1, μπορείτε να γράψετε ως εξής:

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

Αυτός ο επιλογέας διαβάζεται ως: "Επιλέξετε το παρακείμενο στοιχείο του στοιχείου h1, το h1 και το στοιχείο p έχουν κοινό γονικό στοιχείο."

Προσπαθήστε να το δοκιμάσετε

Επεξήγηση Γραμματικής

Ο επιλογέας γειτονικών αδελφών χρησιμοποιεί το σύμβολο加上 (+), δηλαδή ο συνδυαστής γειτονικών αδελφών (Adjacent sibling combinator).

Σημείωση:Καθώς και οι συνδυαστές γονέα, οι συνδυαστές γειτονικών αδελφών μπορούν να έχουν κενά.

Δείτε τον παρακάτω κλάσμα δέντρου εγγράφου:

<div>
  <ul>
    <li>Λίστα στοιχείου 1</li>
    <li>Λίστα στοιχείου 2</li>
    <li>Λίστα στοιχείου 3</li>
  </ul>
  <ol>
    <li>Λίστα στοιχείου 1</li>
    <li>Λίστα στοιχείου 2</li>
    <li>Λίστα στοιχείου 3</li>
  </ol>
</div>

Στο παραπάνω απόσπασμα, το στοιχείο div περιέχει δύο λίστας: μια μη οργανωμένη λίστα και μια οργανωμένη λίστα, κάθε μία από τις οποίες περιέχει τρία στοιχεία λίστας. Αυτές οι λίστας είναι συνεχόμενες αδελφές, τα στοιχεία της λίστας είναι επίσης συνεχόμενες αδελφές. Ωστόσο, τα στοιχεία της πρώτης λίστας και της δεύτερης λίστας δεν είναι συνεχόμενες αδελφές, καθώς αυτά τα ζευγάρια στοιχείων δεν ανήκουν στον ίδιο γονέα (τουλάχιστον μπορούν να θεωρηθούν ανεψιές).

Παρακαλώ θυμάστε ότι με έναν συνδετήρα μπορεί να επιλεγεί μόνο ο δεύτερος στοιχής από τους δύο συνεχόμενους αδελφούς. Δείτε την παρακάτω επιλογή:

li + li {font-weight:bold;}

Αυτή η επιλογή θα μετατρέψει μόνο τον δεύτερο και τον τρίτο στοιχείο της λίστας σε粗体. Το πρώτο στοιχείο δεν επηρεάζεται.

Προσπαθήστε να το δοκιμάσετε

Σύνδεση με άλλες επιλογές

Ο συνδυασμός συνδεκτών μπορεί να συνδυαστεί με άλλους συνδεκτές:

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

Αυτή η επιλογή εξηγείται ως: Επιλογή όλων των αδελφών ul στοιχείων που ακολουθούν τον στοιχείο table, το οποίο περιλαμβάνεται σε ένα στοιχείο body, το οποίο είναι το στοιχείο του html.