Feb
Väljare och selectors i CSS
Kategorier: CSSTro det eller ej, men det finns många fler sätt att få sin stil att "träffa" rätt element i HTML-koden än att använda id och klasser. Små underverk som kallas väljare, eller selectors på engelska, ger dig oanade möjligheter till att sprida din layout över olika element som gödsel på en åker. Fast utan stanken. Denna artikel tar upp de olika väljare som finns i CSS2-standarden.
Har du ännu inte läst de två artiklarna om DOM är det hög tid att göra det nu. Du finner DOM del 1 här och DOM del 2 här.
Vi börjar med de två vanligaste väljarna, de för klasser och id. I ett element sätts attributet "class" eller "id" till ett namn.
<div id="svartText">
I CSS:en skrivs sedan först en punkt (för klasser) eller en brädgård (för ID) och samma namn, följt av CSS-koden inom klammerparentes:
#svartText {
color: black
}Detta innebär att innehållet i den div som har id "svartText" kommer att få svart text. Du kan även använda samma CSS-kod på flera olika klasser och ID:n genom att separera dem med kommatecken:
#svartText, #litenRuta, .ingress {
color: black
}Denna CSS kommer att gälla för samtliga id/klasser vars namn står innan CSS-koden.
Man kan även skriva enbart elementet. Till exempel:
#svartText ul {
color: black
}Denna väljare kommer då att välja de UL-element som är descendants till elementet med id "svartText" i DOM-strukturen. OBS! Ska dessa träffa fler olika element med hjälp av kommaseparering, måste hela "sökvägen" skrivas igen efter varje kommatecken. Denna kod kommer inte att träffa de ul och p som är descendants till #svartText:
#svartText ul, p {
color: black
}Men denna kommer att få den eftersökta effekten:
#svartText ul, #svartText p {
color: black
}Man kan även ange att en klass/ett id bara ska gälla för en viss typ av element genom att sätta elementtypen före namnet:
ul.svartText {
color: black
}Denna CSS kommer endast träffa det element som har klassen "svartText" och är en UL.
Än så länge har vi bara behandlat tämligen standardbetonade väljare, men nu ska vi ge oss i kast med lite mer ovanliga.
ul>li {
color: black
}Väljaren ">" innebär att stilen ska träffa de children av en viss elementtyp som finns under det angivna elementet.
li:first-child {
color: black
}Här kommer stilen att träffa det LI-element som är första child, i praktiken alltså det första list-elementet i listan.
h1+p {
font-style: italic
}Plustecknet anger att stilen ska träffa det andra elementet när det föregås av det första. I exemplet kommer de paragrafer som föregås av ett h1-element att få kursiv stil.
img[alt] {
border: 1px solid green
}Väljaren ovan betyder att de IMG-element som har attributet "alt" satt till någonting (oavsett vad) ska få en grön ram. Man skulle på ett enkelt sätt kunna invertera det hela så att de IMG-element som matchar denna väljare slipper en röd ram, på så vis kan man lätt se vilken bild som saknar alt-attributet.
div[class="varning"] {
color: red
}Med denna väljare anger man att det DIV-element som har attributet "class" satt till "varning" ska få röd text.
Detta var några användbara väljare i CSS2-standarden. Det finns några till som oftast har med länkar och användarhändelser att göra (:link, :visited, :active, :focus och :hover) men dessa är tämligen självförklarande.
Nackdelen med vissa av dessa väljare är att de inte stöds fullt ut av alla webbläsare. Detta kan göra det lite vanskligt att använda dem. Men så fort Internet Explorer 6 är borta från marknaden är det bara att köra på! ;) Här är en exempelsida som visar de olika väljarna i praktiken. Du kan även se hur väljarna fungerar i olika webbläsare.
Vad kan vi då förvänta oss av framtiden? I och med CSS 3 kommer ännu fler väljare som är oerhört kraftfulla och användbara. Det kommer dock att ta ett tag innan de stöds fullt ut av alla webbläsare så vi väntar med dem, även om vissa av dem stöds på sina håll.
W3C har på sin sida mycket bra information om både CSS2-väljare och CSS3-väljare.
TYCKTE DU OM ARTIKELN?
