CSS selectors
Enkle selektorer
| Form | Forklaring |
|---|---|
| e | alle elementer av typen e |
| #c | elementet med id c |
| .c | alle elementer med klasse (class) c |
| e.c | alle e-elementer med klasse (class) c |
| * | alle elementer |
Attributt selektorer
| Form | Forklaring |
|---|---|
| e[a] | alle e-elementer med en a attribute |
| e[a="b"] | alle e-elementer med en a attribute med verdien b |
| e[a~="b"] | alle e-elementer med en a attribute der verdien b forekommer i "whitespace-separated list" av verdier |
| e[a^="b"] | alle e-elementer med en a attribute der verdien begynner med b |
| e[a$="b"] | alle e-elementer med en a attribute der verdien ender med b |
| e[a*="b"] | alle e-elementer med en a attribute som inneholder b |
| e[a|="b"] | alle e-elementer med en a attribute som første verdi i en - separert liste |
Pseudo klasser
| Form | Forklaring |
|---|---|
| e:link | når e er en link som ikke er besøkt eller aktiv eller mouseover eller fokusert |
| e:visited | når e er en link som er besøkt |
| e:active | når e er en link som er aktiv |
| e:hover | når e er en link som musa beveger seg over |
| e:focus | når e er en link eller et form element som har fokus som resultata av en tastet tab |
| e:target | når e er fragment i den refererende URI'en |
| e:lang(no) | når e er et element i språket "no". |
Kombinasjoner
| Form | Forklaring |
|---|---|
| e > f | når f er direkte barn av e |
| e + f | når f kommer rett etter e |
| e ~ f | når f kommer et eller annet sted etter e |
| e:not(s) | elementer av typen e som ikke matcher selectore s |
Strukturelle selektorer
| Form | Forklaring |
|---|---|
| e:first-child | første e-element som er barn av foreldre elementet |
| e:first-of-type | første e-element i blandt søsken |
| e:last-child | siste e-element som er barn av foreldre elementet |
| e:last-of-type | siste e-element i blandt søsken |
| e:only-child | det eneste e-elementet som er barn av foreldre elementet |
| e:only-of-type | det eneste e-elementet som er barn av foreldre elementet |
| e:empty | et e-element som ikke har andre barn enn et text element |
| e:nth-child(n) | et e-element som er n'te barn av foreldre-elementet |
| e:nth-last-child(n) | et e-element som er n'te barn av foreldre-elementet, talt bakfra |
| e:nth-of-type(n) | det n'te e-elementet |
| e:nth-last-of-type(n) | det n'te e-elementet, talt bakfra |
| e:root | e-elementet som er dokument roten, html |
Form og pseudoelementer
| Form | Forklaring |
|---|---|
| e:enabled | et ui-element e som er enabled |
| e:disabled | et ui-element e som er disabled |
| e:checked | et ui-element e som er checked |
| e:first-line | den første formaterte linja i et e-element |
| e:first-letter | den første formaterte bokstaven i et e-element |
| e:before | generert innhold foran et e-element |
| e:after | generert innhold etter et e-element |
Javascript
Når vi skal programmere Javascript mot en DOM har vi fra tidligere disse metodene for å identifisere elementer
- getElementsByTagName(e)
- getElementById(i)
I HTML5 med CSS3 har vi i tillegg fått disse:
- getElementsByClassName(c)
- querySelectorAll(s)
- querySelector(s)
getElementsByClassName(c) finner elementer der c kan være en tekst i en blank-separart list av klassenavn. De to siste, querySelectorAll(s) og querySelector(s), finner henholdsvis en liste av elementer eller det første i lista som identifiseres med selektoren s.
Alle disse metodene er implementert for alle elementer, ikke bare document. Det betyr at de arbeider ut fra det vi i XPATH-terminologi vil kalle "current node". Dette gir oss et kraftig verktøy for å identifisere og modifisere elementer på en vevside.
Merk også at vi kan programmere Javascript mot et stilsett. Det betyr at vi kan endre innholdet i et stilsett fra Javascript. Også her bruker vi selektorer til å identifisere stilregler.
Mer om Javascript og stiler i modulen Javascript og CSS .
