Ο συνδυασμός είναι κάτι που εξηγεί τη σχέση μεταξύ των επιλογέων.
Ένας επιλογέας CSS μπορεί να περιέχει περισσότερους από έναν απλούς επιλογείς. Ανάμεσα στο απλό επιλογείς, μπορούμε να συμπεριλάβουμε έναν συνδυασμό.
Υπάρχουν τέσσερις διαφορετικοί συνδυαστές στο CSS:
επιλογέας απογόνων (κενός)
παιδικός επιλογέας (>)
επιλογέας διπλανών αδερφών (+)
γενικός επιλογέας αδελφών (~)
Ο επιλογέας καταγωγής ταιριάζει με όλα τα στοιχεία που είναι απόγονοι ενός καθορισμένου στοιχείο.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία <p> μέσα στα στοιχεία <div>:
div p {
background-color: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Ο παιδικός επιλογέας επιλέγει όλα τα στοιχεία που είναι τα παιδιά του α καθορισμένο στοιχείο.
Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <p> που είναι παιδιά ενός <div> στοιχείο:
div > p {
background-color: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
Ο επιλογέας γειτονικών αδερφών χρησιμοποιείται για την επιλογή ενός στοιχείου που είναι άμεσα μετά από άλλο συγκεκριμένο στοιχείο.
Τα αδερφικά στοιχεία πρέπει να έχουν το ίδιο γονικό στοιχείο και το "γειτονικό" σημαίνει «ακολουθεί αμέσως».
Το παρακάτω παράδειγμα επιλέγει το πρώτο στοιχείο <p> που τοποθετείται αμέσως μετά τα στοιχεία <div>:
div + p {
background-color: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
Ο γενικός επιλογέας αδελφών επιλέγει όλα τα στοιχεία που είναι τα επόμενα αδέρφια ενός καθορισμένου στοιχείου.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία <p> που είναι τα επόμενα αδέρφια των στοιχείων <div>:
div ~ p {
background-color: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
Παράδειγμα :
div p
Παράδειγμα περιγραφής:
Επιλέγει όλα τα στοιχεία <p> μέσα στα στοιχεία <div>
Παράδειγμα :
div > p
Παράδειγμα περιγραφής:
Επιλέγει όλα τα στοιχεία <p> όπου το γονικό στοιχείο είναι στοιχείο <div>
Παράδειγμα :
div + p
Παράδειγμα περιγραφής:
Επιλέγει το πρώτο στοιχείο <p> που τοποθετείται αμέσως μετά τα στοιχεία <div>
Παράδειγμα :
p ~ ul
Παράδειγμα περιγραφής:
Επιλέγει κάθε στοιχείο <ul> που προηγείται από ένα στοιχείο <p>