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 CSS og JS .