Selectors er en måde at identificere, eller nærmere udvælge, det man vil style i sit style sheet.
Man kan dele selectors op i tre typer:
elementer (dvs. tags)
attributter
konditionelle selectors
og, hvad der er nok så vigtigt, man kan kombinere selectors. For de konditionelle selectors er det en del af funktionen, så de er altid kombineret med en af de to andre typer selectors.
Bemærk, at der for nogle selektorer bruges dobbeltkolon, i stedet for enkeltkolon. Dette er til CSS3-standarden. Bruger man enkeltkolon, hører den til CSS2.
Elementer som selector
Elementer/tags er en af de meget udbredte selektorer til CSS. Som det også fremgår af eksemplerne på denne side, kan man kombinere attributter, tags og konditionelle selectors på kryds og tværs.
Selector
Eksempel
Effekt
element
SUB
Udvælger alle de specficerede elementer/tags, i dette tilfælde SUB.
element,element
DIV, P
Udvælger alle de specficerede elementer/tags adskildt med komma, i dette tilfælde alle DIV- og alle P-elementer/tags
element element
DIV P
Udvælger alle specificerede elementer på på 2. positionen indeholdt i elementer specificeret i 1. position. I det viste eksempel alle P-elementer i DIV-elementer: <DIV><P></P></DIV>. Denne kombination ser man tit brugt ved lister som LI UL, hvor man vil specificere underpunkter som noget andet end standardcirklen.
element > element
DIV > P
Udvælger alle P-elementer, hvor parent-elementet er en DIV
element + element
DIV + P
Udvælger alle P-elementer der er placeret lige efter DIV-elementer.
element ~ element
P ~ UL
Udvælger alle UL-elementer, som har et P-element lige før.
*
*
Udvælger alle elementer. Anvendeligheden af denne kan nok diskuteres. Skal man benytte sig af noget styling som skal være på alle tags, vil man i stedet style BODY-tag'en.
Attributter som selector
Fordi attributterne indeholder en del informationer, giver det ofte mening at selektere på disse. De klassiske i CSS er klasser og ID, og radiobuttons bruger NAME til at holde styr på hvilke radiobuttons der hører sammen, men der er en længere række muligheder. Som det også fremgår af eksemplerne på denne side, kan man kombinere attributter, tags og konditionelle selectors på kryds og tværs.
Selector
Eksempel
Effekt
.Class
.Test
Udvælger alle elementer med CLASS="Test"
#id
#Navn
Udvælger alle elementer med ID="Navn"
[attribut]
[TITLE]
Udvælger alle elementer med en specifik attribut, f.eks. alle med TITLE eller ID
[attribut=værdi]
[TARGET=_blank]
Udvælger alle elementer hvor den specificerede attribut har den specificerede værdi, f.eks. TARGET="_blank"
[attribut~=værdi]
[TITLE~=blad]
Udvælger alle elementer hvor den specificerede attribut indeholder den specificerede værdi, dvs. i det viste eksempel alle elementer/tags hvor TITLE-attributten indeholder ordet "blad". Kan det samme som [attribut*=værdi], men er CSS2 i stedet for CSS3.
[attribut|=værdi]
[TITLE|=blad]
Udvælger alle elementer hvor den specificerede attribut starter med den specificerede værdi, dvs. i det viste eksempel alle elementer/tags hvor TITLE-attributten starter med "blad". Kan det samme som [attribut^=værdi], men er CSS2 i stedet for CSS3.
[attribut^=værdi]
a[href^="https"]
Udvælger attributter hvis værdi starter med en given værdi. I det viste eksempel alle A tags hvor HREF-attributten starter med "https". Kan det samme som [attribut|=værdi], men er CSS3 i stedet for CSS2.
[attribut$=værdi]
A[HREF$=".pdf"]
Udvælger alle elementer, hvor den specificerede attribut slutter med den specificerede streng. I det viste tilfælde alle A-tags hvor HREF-attributten slutter med ".pdf"
[attribut*=værdi]
A[HREF*="html-hajen"]
Udvælger alle elementer, hvor den specificerede attribut indeholder den specificerede streng. I det viste tilfælde alle A-tags hvor HREF-attributten indeholder tekststrengen "html-hajen". Kan det samme som [attribut~=værdi], men er CSS3 i stedet for CSS2.
Konditionelle selectors
De konditionelle selektorer er dem der reagerer på en handling. Dette kan både være en direkte handling, f.eks. når man holder cursoren over et eller andet, eller det kan være indirekte, som hvis der er en specifik tag eller attribut, skal der gøres et eller andet. I modsætning til tags og attributter, kan denne type selektorer ikke stå alene. De bruges som minimum med en tag eller attribut, men kan, ud over denne begrænsning, kombineres med attributter, tags og andre konditionelle selectors på kryds og tværs.
For selectors er der en del, som er specifikke for en én tag, så derfor er listen delt op i specifikke og generelle selectors.
Selectors til links
Selector
Eksempel
Effekt
:active
a:active
Udvælger det aktive link, dvs. hvordan linket ser ud lige når du klikker på det.
:link
a:link
Udvælger alle links man ikke har klikket på, dvs. links til sider man ikke har besøgt (ifølge de cookies man har liggende i sin browserhistorik, vel at mærke).
:visited
a:visited
Udvælger alle links man har klikket på, dvs. links til sider man har besøgt (ifølge de cookies man har liggende i sin browserhistorik, vel at mærke).
:target
#HeadLine:target
Udvælger det aktive element med #HeadLine, dvs. det link man har klikket på.
Selectors til INPUT
Selector
Eksempel
Effekt
:checked
INPUT:checked
Udvælger alle markerede INPUT-elementer
:disabled
INPUT:disabled
Udvælger alle INPUT-elementer der er disablet
:enabled
input:enabled
Udvælger alle INPUT-elementer der er enablet
:focus
INPUT:focus
Udvælger alle INPUT-elementer der har fokus, f.eks. et skrivefelt man er ved at udfylde.
:in-range
INPUT:in-range
Udvælger alle INPUT-elementer der ligger inden for et specificeret interval
:invalid
INPUT:invalid
Udvælger alle INPUT-elementer med en ugyldig værdi
:optional
INPUT:optional
Udvælger alle INPUT-elementer hvor REQUIRED-attributten ikke er specificeret
:out-of-range
INPUT:out-of-range
Udvælger alle INPUT-elementer der ligger uden for et specificeret interval
:read-only
INPUT:read-only
Udvælger alle INPUT-elementer hvor READONLY-attributten er specificeret
:read-write
INPUT:read-write
Udvælger alle INPUT-elementer hvor READONLY-attributten ikke er specificeret
:required
INPUT:required
Udvælger alle INPUT-elementer hvor REQUIRED-attributten er specificeret
:valid
INPUT:valid
Udvælger alle INPUT-elementer med en gyldig værdi
Generelle selectors
Selector
Eksempel
Effekt
::after
P::after
Indsætter det man specificerer i style sheetet efter indholdet af det specifierede element, i det viste eksempel efter indholdet af alle P-tags
::before
P::before
Indsætter det man specificerer i style sheetet foran indholdet af det specifierede element, i det viste eksempel før indholdet af alle P-tags
:empty
P:empty
Udvælger alle elementer, der ikke har children/child elements, inklusiv text nodes. I det viste eksempel alle P-tags uden children
:first-child
LI:first-child
Udvælger det første child element for alle de specificerede parent elements. I det viste eksempel vil det være det første punkt på bullet listerne. Kan også gøre med :nth-child(1).
::first-letter
P::first-letter
Udvælger det første bogstat i indholdet af det specificerede element. I det viste eksempel vil det være det første bogstav i inholdet af alle P-tags
::first-line
P::first-line
Udvælger det første linje af indholdet af det specificerede element. I det viste eksempel vil det være det første linje af inholdet af alle P-tags
:first-of-type
P:first-of-type
Udvælger det første element af den specificerede type i forhold til siblings. I det viste eksempel alle P-tags som er det første blandt dets siblings
:hover
A:hover
Udvælger elementer/tags som man holder cursoren over (mouse over). I det viste eksempel et link, men denne selector kan bruges generelt på tags.
:lang(language)
DIV:lang(da)
Udvælger elementer/tags hvor et givent sprog er specificeret. I det viste eksempel en DIV hvor sproget er specificeret til at være dansk.
:last-child
LI:last-child
Udvælger det sidste child element for alle de specificerede parent elements. I det viste eksempel vil det være det sidste punkt på bullet listerne.
:last-of-type
P:last-of-type
Udvælger den det sidste element af den specificerede type i forhold til siblings. I det viste eksempel alle P-tags som er det sidste blandt dets siblings
:not(selector)
:not(P)
Udvælger alle elementer, som ikke er det specificerede. I det viste tilfælde alle tags, som ikke er P-tag'en
:nth-child(n)
LI:nth-child(2)
Udvælger det specificerede nummer i rækken af de specificerede child elements. I det viste tilfælde det andet punkt på bulletlisterne.
:nth-last-child(n)
LI:nth-last-child(2)
Udvælger det specificerede nummer i rækken af de specificerede child elements, talt bagfra. I det viste tilfælde det næstsidste punkt på bulletlisterne.
:nth-last-of-type(n)
P:nth-last-of-type(2)
Udvælger det nummer i rækken af den specificerede type elementer, i forhold til siblings, talt bagfra. I det viste eksempel alle P-tags som er det næstsidste, blandt siblings som er P-tags.
:nth-of-type(n)
P:nth-of-type(2)
Udvælger det nummer i rækken af den specificerede type elementer, i forhold til siblings. I det viste eksempel alle P-tags som er det det andet i rækken, blandt siblings som er P-tags
:only-of-type
P:only-of-type
Udvælger det specificerede element, som er det eneste af sin type blandt siblings. Note: Fungerer også hvis der ikke er siblings. I det viste eksempel P-tags hvor alle siblings, hvis der er nogen, er andre tags.
:only-child
P:only-child
Udvælger det specificerede element, som er enebarn, dvs. ingen siblings. I det viste eksempel alle P-tags, som ikke har siblings
:root
:root
Udvælger dokumentets rod-element, hvilket for HTML vil sige BODY-tag'en
::selection ::-moz-selection
::selection
Udvælger den del af elementet som markeres af brugeren. Bemærk: For også at fungerer med Firefox, skal man også have en ::-moz-selection