Ποιοι είναι οι κύριοι τύποι των CSS selectors;

Question

IT Interview Practice · Accepted Answer

Οι selectors στοχεύουν σε ποια στοιχεία ισχύει ένας κανόνας. Κυμαίνονται από απλά (κατά tag) έως ισχυρά combinators. ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## Combinators — σχέσεις μεταξύ στοιχείων ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` Η διαφορά μεταξύ κενού (descendant) και `>` (direct child) έχει σημασία: `.menu li` ταιριάζει και σε βαθιά ένθετα `li`, ενώ `.menu > li` ταιριάζει μόνο στο επάνω επίπεδο. ## Pseudo-classes και pseudo-elements ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## Ομαδοποίηση και σύγχρονα selectors ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## Γιατί έχει σημασία Οι selectors είναι ο τρόπος με τον οποίο συνδέετε τα styles με το markup. Η κατάκτηση των classes (το workhorse), των combinators (για σχέσεις) και των structural/state pseudo-classes σας επιτρέπει να στοχεύσετε με ακρίβεια χωρίς να προσθέτετε επιπλέον classes παντού — και τα σύγχρονα `:is()`/`:has()` κάνουν την σύνθετη στόχευση περιεκτική. Προτιμήστε τις classes έναντι των ids/heavy nesting για να κρατήσετε τη specificity διαχειρίσιμη.

Combinators — σχέσεις μεταξύ στοιχείων

Pseudo-classes και pseudo-elements

Ομαδοποίηση και σύγχρονα selectors

Γιατί έχει σημασία

Σχετικές ερωτήσεις