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:
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.
Man kan dele selectors op i tre typer:
- elementer (dvs. tags)
- attributter
- konditionelle 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 |
| 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, hvor man vil vise underinddelinger ens på tværs af browsere (default bullet til dette er ikke den samme for alle browsere), f.eks. en firkant: UL UL {list-style-type:square}. |
| 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. Hvis du har brug for at specificere, at du søger i HTML namespace, anvender du i stedet html|*. At skrive |* betyder alle elementer uden et namespace, og er ækvivalent til *. |
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, dog med enkelte begrænsninger.
| Selector | Eksempel |
| .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 hændelse. 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, med få begrænsninger ud over denne, kombineres med attributter, tags og andre konditionelle selectors på kryds og tværs, f.eks. fungerer P LI::after eller P,LI::after ikke, i disse tilfælde skal du bruge en workaround, f.eks. ved at bruge ID eller CLASS.
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
Selectors til INPUT
Generelle selectors
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 |
| :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. den formatterer elementet med specificerede ID på siden (som ikke behøver at være et link). |
Selectors til INPUT
| Selector | Eksempel |
| :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 |
| ::after | LI::after Indsætter det man specificerer i style sheetet efter indholdet i det specifierede element, i det viste eksempel efter indholdet af alle LI-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 |