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 | 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
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 | 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. den formatterer elementet med specificerede ID på siden (som ikke behøver at være et link). |
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 |