Mer om selektorer

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Inledning

På den här sidan kommer jag att berätta mer om vilka olika slags selektorer det finns. Du kommer att få stifta bekantskap med några nya termer och funktioner. För att du skall kunna tillgodogöra dig texten bör du ha läst introduktionen till stylesheets.

Jag har utgått ifrån att man lägger in stilmallen i HEAD eller hänvisar till den via LINK-elementet. Alla exempel utgår dock ifrån att stilmallen ligger i HEAD, eftersom det besparar mig en massa tid. Jag har nämligen försökt ta med så många exempel som möjligt på de olika sidorna.

2. Vilka selektorer finns?

På förra sidan skrev jag lite om hur syntaxen ser ut. Bilden här bredvid visar grundprinciperna för ett uttryck. Nu skall vi titta närmare på vilka selektorer som finns. De kan nämligen se ut på lite olika sätt. Först får du en lista och därefter beskriver jag dem i tur och ordning:

 
Enkel selektor

En enkel selektor eller typselektor matchar alla förekomster av ett HTML-element i dokumentet. Skriver vi:

H2 { color: blue }

kommer alla rubriker satta med H2 att få en blå färg. H2 kallas för selektorns subjekt, eftersom det är den som styr vilket HTML-element som skall påverkas. I följande uttryck är P subjekt, medan punkten och det som följer efter inte är något subjekt:

P.rubrik { color: blue }

 
Multipel enkel selektor

Med kommatecken mellan två selektorer kan man styra flera element åt gången. Samtliga blir då subjekt:

TABLE, TR, TH, TD, UL, OL, LI, I, U, B, P { font-size: 12 pt }

Så här har jag gjort på min webbresurs, för att tala om för webbläsarna att de inte skall byta teckensnitt eller teckenstorlek, bara för att det kommer en tabell eller lista. Detta kan annars vara ett problem!

 
Kontextuell selektor

En kontextuell selektor kallas så därför att den anger en kontext för när ett HTML-element skall påverkas. Kontext betyder alltså "omgivning" och kan se ut så här:

P B { color: blue }

Här är B subjektet och hela uttrycket talar om att när fet stil förekommer i ett stycke, så skall den skrivas med blå färg. Däremot påverkas inte den feta stilen i tabeller, listor eller om man använder DIV eller SPAN.

En av mina sidor kommer att ta upp detta mer noggrant. Det handlar nämligen om en princip som kallas ärvning. Den innebär att ett element ärver egenskaper från det element som omger det. Står B inom P så ärver B egenskaperna P har. Står B inom DIV så ärver B i stället DIVs egenskaper.

 
Klass-selektor

Det finns något som heter klasser, som är samlingar av olika element. De inställningar man gör för en klass kan alltså påverka ett eller flera element. Här är två exempel:

P.rubrik { color: blue }
.variant { color: red }

I det första fallet är klassen knuten till P, som är subjekt. Klassen påverkar däremot inga andra element. I andra fallet saknas subjekt och i stället kan klassen hämtas in och påverka i stort sett alla objekt. Så här hämtar man in stilmallen för en klass:

<P class="rubrik">Denna text blir blå</P>
<DIV class="variant">Denna text blir röd</DIV>

Det andra exemplet kan också hämtas in av H1-H6, P, SPAN, B, STRONG, osv. Däremot kommer det inte att bli rätt om man skriver:

<DIV class="rubrik">Denna text blir inte färgad</DIV>

Texten skall då nämligen inte påverkas. Glömmer man att avsluta startelementet, ärver de efterföljande styckena föregående styckes inställningar.

 
ID-selektor

ID står för identifierare (identifier) och innebär att man pekar ut ett och endast ett element i HTML-dokumentet. Kommandot skrivs t.ex så här:

P#rubrik { color: blue }

Här är det alltså viktigt att man använder ett subjekt. Gör man inte det får man det oftast svårare att förstå vad selektorn skall användas till. Jag kommer att berätta mer om ID-selektorer efter hand.

 
Universell selektor

En universell selektor omsluter alla HTML-element i dokumentet och kan t.ex skriva så här:

* { color: blue }

Om selektorn innehåller andra objekt kan stjärnan uteslutas. Det innebär att följande två sätt är ekvivalenta, dvs ger samma resultat:

*.rubrik { color: blue }
.rubrik { color: blue }

 
Pseudo-element-selektor

Pseudo-element kallas så därför att de ingår i selektorer som inte pekar ut ett helt element, utan blott delar av det. Det kan t.ex vara första raden eller bokstaven i ett stycke. Jag berättar mer om hur det fungerar i nästa avsnitt, men titta gärna på syntaxen så länge:

P:before { color: blue }

 
Pseudo-klass-selektor

Pseudo-klasser är snarlika pseudo-elementen, men pekar ändå ut hela element. Det som gör dem lite speciella är att de också gör tillägg till elementen som pekas ut. Du kan läsa mer om dem i avsnitt 4 nedan. Så här skriver man dem:

P:first-child { color: blue }

3. Mer om pseudo-element

Pseudo-element pekar alltså ut delar av riktiga HTML-element. I CSS2-specifikationen finns några alternativ, som jag tänker gå igenom här.

:first-line

Detta pseudo-element kan användas för att skapa snygga inledningar och anfanger i stycken, eftersom det pekar ut den första raden. Här är ett exempel:

P:first-line { text-transform: uppercase }

Titta på exemplet i verkligheten >>

Kommandot skall göra så att texten i hela första raden i stycket skrivs med versaler. Resten av stycket skall skrivas med gemena bokstäver. Det finns ett speciellt kommando för att skapa kapitäler, men det kan vi göra på ett lite annat sätt här:

P:first-line { text-transform: uppercase; font-size: smaller }

Titta på exemplet i verkligheten >>

Om man inte vill att hela raden skall påverkas skriver man så här i HTML-dokumentet:

<P><P:first-line>Denna text skall ha kapitäler</P:first-line> men resten av texten på raden och i stycket skall skrivas normalt.

Titta på exemplet i verkligheten >>

Ibland upptäcker man att teori och praktik inte stämmer överens och då måste man trixa till det lite. Här är ett förslag:

P:first-line { text-transform: uppercase; font-size: smaller }
.special { color: black }

I dokumentet skriver man sedan:

<P><SPAN class="special">
<P:first-line>Här kommer kapitälerna</P:first-line>
</SPAN> och här kommer resten av texten i stycket</P>

Titta på exemplet i verkligheten >>

:first-letter

Detta pseudo-element pekar ut den första bokstaven i ett stycke. Därmed skapas ytterligare möjligheter att göra anfanger (drop caps eller initial caps) och andra snygga effekter. Här är ett exempel:

P { font-size: 12px; line-height: 14pt }
P:first-letter { color: #000099; font-size: 300%; margin: 5px; float: left }
.special { text-transform: uppercase; font-size: smaller }

Nu skapar vi en anfang och kapitäler samtidigt. Bli inte orolig om du inte förstår alla egenskaper och värden ännu. Jag kommer att gå igenom dem tids nog. Så här skriver vi koden i dokumentet:

<P><P:first-letter>H</P:first-letter>D
<SPAN class="special">är kommer kapitälerna</SPAN>
och här kommer resten av texten i stycket</P>

Titta på exemplet i verkligheten >>

Här skall webbläsaren alltså skapa en anfang, som är tre gånger så stor som den övriga texten och som dessutom ligger nersänkt i stycket.

Så här ser exemplet ut i några olika webbläsare. Samstämmingheten är faktiskt förvånandsvärt god. Så här bra brukar det inte bli. Ändå tycker jag att tolkningen borde vara bättre hos de båda:

Netscape 6 för Mac	Explorer 5 för Mac
Netscape 4.6 för Windows	Explorer 5 för Windows

4. Mer om pseudo-klasser: Länkfärger

Pseudo-klasser pekar ut ett element i dokumentet och gör ett tillägg till det. Skillnaden gentemot pseudo-elementen kan tyckas liten, men blir större när man tittar mer i detalj på hur de båda fungerar.

:first-child

Denna pseudo-klass pekar antingen ut första förekomsten av ett element i dokumentet eller det första barnet till ett element. Det kan skrivas på följande sätt:

DIV > P:first-child { color: blue }
P:first-child { color: blue }

Båda två följer samma syntax, eftersom det andra sättet är en kortare variant av detta:

* > P:first-child { color: blue }

Det första uttrycket säger att selektorn skall välja alla de förekomster av elementet P, som är barn till ett DIV-element. I det andra uttrycket kan P vara barn till vilket element som helst. Exempel:

<P>Denna text står utanför DIV och påverkas inte
<DIV class="indrag">Denna text påverkas inte heller
<P>Men denna gör det!
<P>Inte denna!
</DIV>
<P>Och inte denna heller!

Vi tittar på ett praktiskt exempel:

P { text-indent: 10px }
DIV > SPAN:first-child { text-indent: 0px }

Skapar ett indrag för första stycket i varje SPAN-element i DIV. Vi använder detta för att ta bort indraget i första stycket efter varje mellanrubrik, vilket är standarden för layout.

I HTML-dokumentet skriver vi så här:

<H3>Här är en rubrik</H3>
<DIV align="left">
<SPAN>Första stycket får inget indrag</SPAN>
<P>Men andra stycket får det
</DIV>

Titta på exemplet i verkligheten >>

:link och :visited

Dessa båda kommandon används för att styra länkarnas utseende. :link är en länk som besökaren ännu inte klickat på. :visited är en länk som besökaren besökt. Här är ett exempel:

A:link { color: #000099; text-decoration: none; }

A:visited { color: #990000; text-decoration: none; }

Detta är den kombination jag använder på min webresurs. Blå länkar utan understrykning för obesökta länkar och röda för besökta. Vill man ha flera olika länkalternativ på sin sida gör man enklast en grundinställning och sedan klasser av specialinställningar. Du skall strax få några förslag.

:hover, :active och :focus

Dessa pseudo-klasser kallar man dynamiska, eftersom de reagerar på vad användaren gör.

Den första, :hover, säger till vad som skall hända då besökaren pekar med muspekaren på ett objekt, t.ex en länk.

Den andra, :active, bestämmer vad som skall ske då något aktiveras, t.ex en länk. Här består det aktiva alltså av att besökaren klickar på länken.

Den tredje, :focus, aktiveras då besökaren har klickat på en länk och länken inte öppnat något nytt fönster. Det kan bero på att länken är felaktig eller att personen dragit i länken. Testa själv så förstår du vad jag menar.

:focus går även att använda när t.ex en textruta i ett formulär är fokuserad och går att skriva i. Textrutan kan då lysas upp med en valfri färg, etc.

Nedan hittar du fyra förslag på länkalternativ. De kan alltså användas på samma sida, för att skapa olika slags länkar:

A:link { color: #000099; text-decoration: none; }
A:visited { color: #990000; text-decoration: none; }
A:hover { color: #0000FF; text-decoration: underline; }
A:active { color: #666666; text-decoration: none; }

A.test:link { color: #333333; font-weight: bold; text-decoration: none; }
A.test:visited { color: #333333; font-weight: bold; text-decoration: none; }
A.test:hover { color: #333333; font-weight: bold; text-decoration: underline; }
A.test:focus { color: #FF0033; font-weight: bold; text-decoration: line-through; }
A.test:active { color: #333333; font-weight: bold; text-decoration: none; }

A.rubrik:link { color: #333333; font-weight: bold; text-decoration: none; }
A.rubrik:visited { color: #333333; font-weight: bold; text-decoration: none; }
A.rubrik:hover { color: #333333; font-weight: bold; text-decoration: underline; }
A.rubrik:active { color: #333333; font-weight: bold; text-decoration: none; }

A.special:link { color: #333333; background-color: #CCFFFF; text-decoration: none; }
A.special:visited { color: #333333; background-color: #CCFFFF; text-decoration: none; }
A.special:hover { color: #333333; background-color: #00CCCC; text-decoration: none; }
A.special:active { color: #333333; background-color: #CCFFFF; text-decoration: none; }

Titta på exemplet i verkligheten >>

Pröva att hålla muspekaren över länkarna, att hålla nere musknappen över dem och dra, att klicka på dem, osv. Då ser du hur det fungerar.

Observera också att understrykningen bara fungerar om :hover läggs efter :link och :visited. Detta har att göra med ärvningen.

:lang

Denna pseudo-klass har skapats för att man lättare skall kunna styra nationella skrivregler, bl.a för frågetecken, citat, betoningstecken, osv. Jag tänker dock inte gå igenom användningen av denna typ av språkkontroller, eftersom jag inte ser någon direkt användning. Läs själv i specifikationens kapitel 5.11 om du vill veta mer.