riferimento CSS w3ii 'viene testato regolarmente con tutti i principali browser.
CSS selettori
In CSS, i selettori sono modelli usati per selezionare l' element(s) che si desidera stile.
Il "CSS" colonna indica in quale versione CSS la proprietà è definita (CSS1, CSS2, or CSS3) .
| Selettore | Esempio | descrizione esempio | CSS |
|---|---|---|---|
| . class | .intro | Seleziona tutti gli elementi con class="intro" | 1 |
| # id | #firstname | Seleziona l'elemento con id="firstname" | 1 |
| * | * | Seleziona tutti gli elementi | 2 |
| element | p | Seleziona tutti <p> elementi | 1 |
| element,element | div, p | Seleziona tutti <div> elementi e tutti i <p> elementi | 1 |
| element element | div p | Seleziona tutti <p> elementi all'interno <div> elementi | 1 |
| element > element | div > p | Seleziona tutti <p> elementi in cui il genitore è un <div> elemento | 2 |
| element + element | div + p | Seleziona tutti <p> elementi che vengono inseriti subito dopo <div> elementi | 2 |
| element1 ~ element2 | p ~ ul | Seleziona ogni <ul> elemento che sono preceduti da un <p> elemento | 3 |
| [ attribute ] | [target] | Seleziona tutti gli elementi con un attributo target | 2 |
| [ attribute = value ] | [target=_blank] | Seleziona tutti gli elementi con target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Seleziona tutti gli elementi con un attributo title contenenti la parola "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | Seleziona tutti gli elementi con un valore di attributo lang inizia con "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | Seleziona ogni <a> elemento il cui href valore dell'attributo inizia con "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | Seleziona ogni <a> elemento il cui valore di attributo href termina con ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | Seleziona ogni <a> elemento il cui href valore di attributo contiene la stringa "w3ii" | 3 |
| :active | a:active | Seleziona il collegamento attivo | 1 |
| ::after | p::after | Inserire qualcosa dopo che il contenuto di ogni <p> elemento | 2 |
| ::before | p::before | Inserire qualcosa prima che il contenuto di ogni <p> elemento | 2 |
| :checked | input:checked | Seleziona ogni verificato <input> elemento | 3 |
| :disabled | input:disabled | Seleziona ogni disabilitato <input> elemento | 3 |
| :empty | p:empty | Seleziona ogni <p> elemento che non ha figli (including text nodes) | 3 |
| :enabled | input:enabled | Seleziona ogni abilitato <input> elemento | 3 |
| :first-child | p:first-child | Seleziona ogni <p> elemento che è il primo figlio del suo genitore | 2 |
| ::first-letter | p::first-letter | Seleziona la prima lettera di ogni <p> elemento | 1 |
| ::first-line | p::first-line | Seleziona la prima riga di ogni <p> elemento | 1 |
| :first-of-type | p:first-of-type | Seleziona ogni <p> elemento che è il primo <p> elemento del suo genitore | 3 |
| :focus | input:focus | Seleziona l'elemento di input che è l'elemento attivo | 2 |
| :hover | a:hover | Seleziona link al passaggio del mouse | 1 |
| :in-range | input:in-range | Seleziona gli elementi di ingresso con un valore all'interno di un intervallo specificato | 3 |
| :invalid | input:invalid | Seleziona tutti gli elementi di input con un valore non valido | 3 |
| :lang( language ) | p:lang(it) | Seleziona ogni <p> elemento con un lang attributo pari a "it" (Italian) | 2 |
| :last-child | p:last-child | Seleziona ogni <p> elemento che è l'ultimo figlio del suo genitore | 3 |
| :last-of-type | p:last-of-type | Seleziona ogni <p> elemento che è l'ultimo <p> elemento del suo genitore | 3 |
| :link | a:link | Seleziona tutti i collegamenti non visitati | 1 |
| :not( selector ) | :not(p) | Seleziona ogni elemento che non è un <p> elemento | 3 |
| :nth-child( n ) | p:nth-child(2) | Seleziona ogni <p> elemento che è il secondo figlio del suo genitore | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | Seleziona ogni <p> elemento che è il secondo figlio del suo genitore, contando dall'ultimo bambino | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore, contando dall'ultimo bambino | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore | 3 |
| :only-of-type | p:only-of-type | Seleziona ogni <p> elemento che è l'unico <p> elemento del suo genitore | 3 |
| :only-child | p:only-child | Seleziona ogni <p> elemento che è l'unico figlio del suo genitore | 3 |
| :optional | input:optional | Seleziona elementi di input senza "required" l'attributo | 3 |
| :out-of-range | input:out-of-range | Seleziona gli elementi di input con un valore al di fuori di un intervallo specificato | 3 |
| :read-only | input:read-only | Seleziona gli elementi di input con la "readonly" attributo specificato | 3 |
| :read-write | input:read-write | Seleziona gli elementi di input con la "readonly" attributo non specificato | 3 |
| :required | input:required | Seleziona elementi di input con la "required" attributo specificato | 3 |
| :root | :root | Seleziona elemento radice del documento | 3 |
| ::selection | ::selection | Seleziona la porzione di un elemento selezionato da un utente | |
| :target | #news:target | Seleziona l'attuale elemento #news attiva (cliccato su un URL che contiene quel nome ancora) | 3 |
| :valid | input:valid | Seleziona tutti gli elementi di input con un valore valido | 3 |
| :visited | a:visited | Seleziona tutti i link visitati | 1 |