HTML-Hajen

Selectors til CSS









Hvad går det ud på?

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:
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.

SelectorEksempelEffekt
elementSUBUdvælger alle de specficerede elementer/tags, i dette tilfælde SUB.
element,elementDIV, PUdvælger alle de specficerede elementer/tags adskildt med komma, i dette tilfælde alle DIV- og alle P-elementer/tags
element elementDIV PUdvæ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 > elementDIV > PUdvælger alle P-elementer, hvor parent-elementet er en DIV
element + elementDIV + PUdvælger alle P-elementer der er placeret lige efter DIV-elementer.
element ~ elementP ~ ULUdvæ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.

SelectorEksempelEffekt
.Class.TestUdvælger alle elementer med CLASS="Test"
#id#NavnUdvæ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
SelectorEksempelEffekt
:activea:activeUdvælger det aktive link, dvs. hvordan linket ser ud lige når du klikker på det.
:linka:linkUdvæ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).
:visiteda:visitedUdvæ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:targetUdvælger det aktive element med #HeadLine, dvs. det link man har klikket på.



Selectors til INPUT
SelectorEksempelEffekt
:checkedINPUT:checkedUdvælger alle markerede INPUT-elementer
:disabledINPUT:disabledUdvælger alle INPUT-elementer der er disablet
:enabledinput:enabledUdvælger alle INPUT-elementer der er enablet
:focusINPUT:focusUdvælger alle INPUT-elementer der har fokus, f.eks. et skrivefelt man er ved at udfylde.
:in-rangeINPUT:in-rangeUdvælger alle INPUT-elementer der ligger inden for et specificeret interval
:invalidINPUT:invalidUdvælger alle INPUT-elementer med en ugyldig værdi
:optionalINPUT:optionalUdvælger alle INPUT-elementer hvor REQUIRED-attributten ikke er specificeret
:out-of-rangeINPUT:out-of-rangeUdvælger alle INPUT-elementer der ligger uden for et specificeret interval
:read-onlyINPUT:read-onlyUdvælger alle INPUT-elementer hvor READONLY-attributten er specificeret
:read-writeINPUT:read-write Udvælger alle INPUT-elementer hvor READONLY-attributten ikke er specificeret
:requiredINPUT:requiredUdvælger alle INPUT-elementer hvor REQUIRED-attributten er specificeret
:validINPUT:validUdvælger alle INPUT-elementer med en gyldig værdi



Generelle selectors
SelectorEksempelEffekt
::afterP::afterIndsætter det man specificerer i style sheetet efter indholdet af det specifierede element, i det viste eksempel efter indholdet af alle P-tags
::beforeP::beforeIndsætter det man specificerer i style sheetet foran indholdet af det specifierede element, i det viste eksempel før indholdet af alle P-tags
:emptyP:emptyUdvælger alle elementer, der ikke har children/child elements, inklusiv text nodes. I det viste eksempel alle P-tags uden children
:first-childLI: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-letterP::first-letterUdvæ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-lineP::first-lineUdvæ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-typeP: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
:hoverA:hoverUdvæ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-childLI:last-childUdvæ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-typeP:last-of-typeUdvæ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-typeP:only-of-typeUdvæ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-childP:only-childUdvælger det specificerede element, som er enebarn, dvs. ingen siblings. I det viste eksempel alle P-tags, som ikke har siblings
:root:rootUdvælger dokumentets rod-element, hvilket for HTML vil sige BODY-tag'en
::selection
::-moz-selection
::selectionUdvælger den del af elementet som markeres af brugeren. Bemærk: For også at fungerer med Firefox, skal man også have en ::-moz-selection