Όλοι οι συνηθισμένοι επιλογείς CSS, ομαδοποιημένοι ανά οικογένεια: βασικοί, συνδυαστές, ψευδοκλάσεις, ψευδοστοιχεία και επιλογείς χαρακτηριστικών. Κάθε γραμμή συνδυάζει τον επιλογέα με ένα παράδειγμα μίας γραμμής.
Ένας επιλογέας ορίζει τα στοιχεία στα οποία εφαρμόζεται ένας κανόνας. Η ειδικότητα αποφασίζει ποιος κανόνας κερδίζει όταν ταιριάζουν πολλοί: το inline νικά το id, το id νικά την κλάση, η κλάση νικά τον τύπο. Διαβάστε τους επιλογείς από δεξιά προς αριστερά: το πρόγραμμα περιήγησης ταιριάζει πρώτα το δεξιότερο μέρος και μετά ανεβαίνει στους συνδυαστές. Οι οικογένειες παρακάτω καλύπτουν σχεδόν όλα όσα θα γράψετε.
Πίνακας αναφοράς · 53 καταχωρήσεις
Επιλογείς CSSExplained
53 of 53 rows
Βασικοί
Κάθε στοιχείο με αυτή την ετικέτα.
button { }
Στοιχεία με αυτή την κλάση.
.active { }
Το μοναδικό στοιχείο με αυτό το id.
#header { }
Όλα τα στοιχεία.
* { box-sizing: border-box; }
Η ρίζα του εγγράφου· το συνηθισμένο μέρος για καθολικές προσαρμοσμένες ιδιότητες.
:root { --gap: 1rem; }
Στοιχεία που ταιριάζουν με A ή B (ομαδοποίηση).
h1, h2, h3 { }
Συνδυαστές
Οποιοδήποτε B που είναι απόγονος του A.
nav a { }
B που είναι απευθείας παιδί του A.
ul > li { }
B αμέσως μετά το A, ίδιος γονέας.
h1 + p { }
Κάθε B που ακολουθεί το A, ίδιος γονέας.
h1 ~ p { }
Ψευδοκλάσεις (κατάσταση)
Το στοιχείο όσο ο δείκτης βρίσκεται πάνω του.
a:hover { }
Το στοιχείο που έχει εστίαση από το πληκτρολόγιο.
input:focus { }
Στοιχείο που είναι το πρώτο παιδί του γονέα του.
li:first-child { }
Το n-οστό παιδί· δέχεται τύπους όπως 2n.
tr:nth-child(2n) { }
Στοιχεία που δεν ταιριάζουν με κανέναν εσωτερικό επιλογέα· δέχεται λίστα από το Selectors 4.
li:not(:first-child, .skip) { }
Ένα τσεκαρισμένο checkbox, radio ή option.
input:checked { }
Ένα απενεργοποιημένο πεδίο ή κουμπί.
button:disabled { }
Ένας γονέας που περιέχει ταύτιση με τον εσωτερικό επιλογέα.
li:has(ul) { }
Οποιοσδήποτε επιλογέας της λίστας· η ειδικότητα είναι η υψηλότερη της λίστας.
:is(ol, ul) li { }
Ίδιο με το :is(), αλλά με μηδενική ειδικότητα.
:where(ol, ul) li { }
Εστίαση που πρέπει να δείχνει δακτύλιο, συνήθως από το πληκτρολόγιο.
a:focus-visible { }
Στοιχείο του οποίου το ίδιο ή κάποιος απόγονος έχει εστίαση.
form:focus-within { }
Στοιχείο που είναι το τελευταίο παιδί του γονέα του.
li:last-child { }
Στοιχείο χωρίς αδέλφια.
p:only-child { }
Το n-οστό αδέλφι με την ίδια ετικέτα· δέχεται τύπους όπως 2n.
p:nth-of-type(2n) { }
Το πρώτο ή το τελευταίο αδέλφι με την ίδια ετικέτα.
p:first-of-type { }
Στοιχείο χωρίς παιδιά και χωρίς κείμενο.
td:empty { }
Οι σύνδεσμοι που δεν έχουν επισκεφθεί και οι ήδη επισκεμμένοι.
a:visited { }
Πεδία σημειωμένα ως υποχρεωτικά και πεδία που αφήνονται προαιρετικά.
input:required { }
Πεδία των οποίων η τιμή περνά ή αποτυγχάνει τους κανόνες επικύρωσης.
input:invalid { }
Πεδίο που ο χρήστης δεν μπορεί να επεξεργαστεί.
input:read-only { }
Το στοιχείο του οποίου το id ταιριάζει με το τμήμα της διεύθυνσης URL.
#note:target { }
Η προεπιλεγμένη option ή το προεπιλεγμένο κουμπί μιας ομάδας.
input:default { }
Checkbox που τέθηκε σε αόριστη κατάσταση από script.
input:indeterminate { }
Οποιοδήποτε ενσωματωμένο στοιχείο, ή προσαρμοσμένο στοιχείο μόλις καταχωρηθεί.
my-widget:defined { }
Στοιχείο στη δεδομένη γλώσσα.
p:lang(fr) { }
Ψευδοστοιχεία
Ένας δημιουργημένος κόμβος περιεχομένου πριν από το στοιχείο.
label::before { content: ""; }
Ένας δημιουργημένος κόμβος περιεχομένου μετά το στοιχείο.
code::after { content: ";"; }
Το πρώτο γράμμα ενός μπλοκ κειμένου.
p::first-letter { }
Το κείμενο κράτησης θέσης ενός πεδίου.
input::placeholder { }
Η πρώτη γραμμή ενός μπλοκ κειμένου.
p::first-line { }
Το κείμενο που έχει επισημάνει ο χρήστης.
::selection { }
Η κουκκίδα ή ο αριθμός ενός στοιχείου λίστας.
li::marker { }
Η περιοχή πίσω από ένα στοιχείο πλήρους οθόνης ή ένα παράθυρο διαλόγου.
dialog::backdrop { }
Το κουμπί αναζήτησης μέσα σε ένα πεδίο αρχείου.
input::file-selector-button { }
Ένα μέρος του shadow DOM που ο host έχει εκθέσει.
my-widget::part(header) { }
Επιλογείς χαρακτηριστικών
Στοιχεία που έχουν το χαρακτηριστικό, με οποιαδήποτε τιμή.
[required] { }
Το χαρακτηριστικό ισούται ακριβώς με το val.
[type="submit"] { }
Το χαρακτηριστικό αρχίζει με val.
a[href^="https"] { }
Το χαρακτηριστικό τελειώνει με val.
a[href$=".pdf"] { }
Το χαρακτηριστικό περιέχει το val.
a[href*="login"] { }
Μια λίστα χωρισμένη με κενά που περιλαμβάνει το val.
[class~="badge"] { }
Η τιμή ισούται με το val ή αρχίζει με val και παύλα.