referință CSS w3ii“este testat în mod regulat cu toate browserele majore.
CSS Selectori
În CSS, selectoare sunt modele folosite pentru a selecta element(s) pe care doriți să stil.
"CSS" coloana indică , în care versiunea CSS proprietatea este definită (CSS1, CSS2, or CSS3) .
| Selector | Exemplu | descriere exemplu | CSS |
|---|---|---|---|
| . class | .intro | Selectează toate elementele cu class="intro" | 1 |
| # id | #firstname | Selectează elementul cu id="firstname" | 1 |
| * | * | Selectează toate elementele | 2 |
| element | p | Selectează toate <p> elemente | 1 |
| element,element | div, p | Selectează toate <div> elemente și toate <p> elemente | 1 |
| element element | div p | Selectează toate <p> elemente din interiorul <div> elemente | 1 |
| element > element | div > p | Selectează toate <p> elemente în care părintele este un <div> Element | 2 |
| element + element | div + p | Selectează toate <p> Elementele care sunt plasate imediat după <div> elemente | 2 |
| element1 ~ element2 | p ~ ul | Selectează fiecare <ul> element care sunt precedate de o <p> Element | 3 |
| [ attribute ] | [target] | Selectează toate elementele cu un atribut țintă | 2 |
| [ attribute = value ] | [target=_blank] | Selectează toate elementele cu target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Selectează toate elementele cu un atribut titlu care conțin cuvântul "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | Selectează toate elementele cu o valoare a atributului lang începând cu "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | Selectează fiecare <a> elementul a cărui href valoare atribut începe cu "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | Selectează fiecare <a> elementul a cărui valoare atribut href se termină cu ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | Selectează fiecare <a> elementul a cărui href valoare atribut conține subșirul "w3ii" | 3 |
| :active | a:active | Selectează link-ul activ | 1 |
| ::after | p::after | Introduceți ceva după conținutul fiecărui <p> Element | 2 |
| ::before | p::before | Introduceți ceva înainte de conținutul fiecărui <p> Element | 2 |
| :checked | input:checked | Selectează fiecare verificat <input> Element | 3 |
| :disabled | input:disabled | Selectează fiecare dezactivat <input> Element | 3 |
| :empty | p:empty | Selectează fiecare <p> element care nu are copii (including text nodes) | 3 |
| :enabled | input:enabled | Selectează fiecare activat <input> Element | 3 |
| :first-child | p:first-child | Selectează fiecare <p> element care este primul copil al societății - mamă | 2 |
| ::first-letter | p::first-letter | Selectează prima literă a fiecărui <p> Element | 1 |
| ::first-line | p::first-line | Selectează prima linie a fiecărui <p> Element | 1 |
| :first-of-type | p:first-of-type | Selectează fiecare <p> element care este primul <p> elementul părinte | 3 |
| :focus | input:focus | Selectează elementul de intrare, care are focus | 2 |
| :hover | a:hover | Selectează link-uri pe mouse-ul peste | 1 |
| :in-range | input:in-range | Selectează elementele de intrare cu o valoare într-un interval specificat | 3 |
| :invalid | input:invalid | Selectează toate elementele de intrare cu o valoare nevalidă | 3 |
| : lang( language ) | p: lang(it) | Selectează fiecare <p> Element cu un lang atribut egal cu "it" (Italian) | 2 |
| :last-child | p:last-child | Selectează fiecare <p> element care este ultimul copil al părintelui său | 3 |
| :last-of-type | p:last-of-type | Selectează fiecare <p> element care este ultimul <p> elementul mamă | 3 |
| :link | a:link | Selectează toate link-urile nevizitate | 1 |
| : not( selector ) | : not(p) | Selectează fiecare element care nu este un <p> Element | 3 |
| :nth- child( n ) | p:nth- child(2) | Selectează fiecare <p> element care este al doilea copil al părintelui său | 3 |
| :nth-last- child( n ) | p:nth-last- child(2) | Selectează fiecare <p> element care este al doilea copil al său părinte, numărând de la ultimul copil | 3 |
| :nth-last-of- type( n ) | p:nth-last-of- type(2) | Selectează fiecare <p> element care este al doilea <p> elementul mamă, numărând de la ultimul copil | 3 |
| :nth-of- type( n ) | p:nth-of- type(2) | Selectează fiecare <p> element care este al doilea <p> elementul părinte | 3 |
| :only-of-type | p:only-of-type | Selectează fiecare <p> element care este singurul <p> elementul mamă | 3 |
| :only-child | p:only-child | Selectează fiecare <p> element care este singurul copil al părintelui său | 3 |
| :optional | input:optional | Selectează elementele de intrare cu nici o "required" atribut | 3 |
| :out-of-range | input:out-of-range | Selectează elementele de intrare cu o valoare în afara unui interval specificat | 3 |
| :read-only | input:read-only | Selectează elementele de intrare cu "readonly" atributul specificat | 3 |
| :read-write | input:read-write | Selectează elementele de intrare cu "readonly" NU atributul specificat | 3 |
| :required | input:required | Selectează elementele de intrare cu "required" atributul specificat | 3 |
| :root | :root | Selectează elementul rădăcină al documentului | 3 |
| ::selection | ::selection | Selectează porțiunea unui element care este selectat de către un utilizator | |
| :target | #news:target | Selectează elementul curent #news activ (clicked on a URL containing that anchor name) a (clicked on a URL containing that anchor name) care (clicked on a URL containing that anchor name) | 3 |
| :valid | input:valid | Selectează toate elementele de intrare cu o valoare validă | 3 |
| :visited | a:visited | Selectează toate link-urile vizitate | 1 |