Ποια CSS επιλέκτες γνωρίζετε;

• Κατάλληλος επιλογέας (*) - επιλέγει όλα τα στοιχεία.
• Επιλογέας τύπου (στοιχείο) - επιλέγει στοιχεία συγκεκριμένου τύπου.
• Επιλογέας κλάσης (.κλάση) - επιλέγει στοιχεία με συγκεκριμένη κλάση.
• Επιλογέας ταυτότητας (#id) - επιλέγει ένα στοιχείο με συγκεκριμένη ταυτότητα.
• Επιλογέας ιδιότητας ([ιδιότητα], [ιδιότητα="αξία"], [ιδιότητα~="αξία"], [ιδιότητα|="αξία"], [ιδιότητα^="αξία"], [ιδιότητα$="αξία"], [ιδιότητα*="αξία"]) - επιλέγει στοιχεία βάσει της ύπαρξης ή της τιμής της ιδιότητας.
• Ψευδο-κλάσεις (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(επιλογέας)) - επιλέγουν στοιχεία σε συγκεκριμένη κατάσταση ή θέση.
• Ψευδο-στοιχεία (::before, ::after, ::first-line, ::first-letter, ::selection) - επιλέγουν μέρη ενός στοιχείου.
• Συνδετικά:
  • Επιλογέας απογόνου (επιλογέας επιλογέας) - επιλέγει τα απογόνια του πρώτου επιλογέα.
  • Άμεσος γονικός επιλογέας (επιλογέας > επιλογέας) - επιλέγει τα άμεσα παιδιά του πρώτου επιλογέα.
  • Συγγενής αδελφός (επιλογέας + επιλογέας) - επιλέγει το στοιχείο που είναι άμεσος αδελφός (επόμενο) του πρώτου επιλογέα.
  • Γενικός αδελφός (επιλογέας ~ επιλογέας) - επιλέγει όλα τα στοιχεία που είναι αδέλφια (επόμενα) του πρώτου επιλογέα.

Παραδείγματα:

/* Επιλογέας καθολικός */
* {
  margin: 0;
  padding: 0;
}

/* Επιλογέας τύπου */
p {
  line-height: 1.5;
}

/* Επιλογέας κλάσης */
.highlight {
  color: yellow;
}

/* Επιλογέας ταυτότητας */
#main-header {
  font-size: 2em;
}

/* Επιλογέας ιδιότητας */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Ψευδο-κλάση */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Ψευδο-στοιχείο */

p::first-letter {
  font-weight: bold;
}

/* Συνδετικά */
div p {
  margin-bottom: 10px; /* Παραγράφοι μέσα σε div */
}
ul > li {
  list-style: none; /* Άμεσα παιδιά του li μέσα σε ul */
}
h2 + p {
  margin-top: 5px; /* Παραγράφους που ακολουθούν άμεσα το h2 */
}
h3 ~ p {
  color: gray; /* Όλες οι παράγραφοι μετά το h3 */
}