Selektorer (CSS3)

Innehåll

Stilmallar måste appliceras på (X)HTML-element på något sätt. Ett sätt att se det på är att man använder namn (för taggar, klasser och ID:n), eller selektorer (eng. selectors) som är ett bättre tekniskt namn. Denna sida beskriver hur man "namnger" stilmallar (använder selektorer) för att applicera stilmallar på taggar.

De flesta exempel använder inbäddade stilmallar så att (X)HTML- och CSS-kod finns i ett och samma dokument, d.v.s. för att göra det enklare att studera koden i exempel.

Att "namnge" en stilmall innebär i stort sett att man talar om vilka taggar, eller grupper/klasser av taggar, som man vill ska påverkas av mallen. Ska man vara korrekt, d.v.s. använda rätt termer, så använder man selektorer (eng. selectors) för att ange vilka taggar som stilmall ska gälla för. Själv tycker jag bättre om uttrycket "att namnge" en stilmall (d.v.s. namnet är selektorn), vilket är skälet till att jag kommer fortsätta använda detta uttryck. Stilmallar namnges endast då man använder inbäddade eller inlänkade stilmallar (använder man attributet STYLE så har påverkad tagg redan angivits :-). Så i resten av denna underwebb är det underförstått att inbäddade eller inlänkade stilmallar används.

Det finns främst fyra sätt att namnge stilar:

• med taggars namn
• med klasser
• med id:n
• eller med pseudoklasser
• eller med kombinationer av ovanstående

Att använda taggens namn för att applicera stilmallar är ett av de vanligaste sätten. Genom att använda just taggens namn kommer alla taggar med namnet att automatiskt använda stilmallen. I exemplet nedan så kommer alla stycken (P) i dokumentet att använda typsnittet Verdana och alla rubriker av nivå 1 (H1) typsnittet Arial då jag "namngivit" stilmallarna "h1" respektive "p" (markerat med blå text). (Observera att rubriken av nivå 2 är opåverkad.) Efter namnet listas egenskaper som ska ändras inom "hakparenteser", d.v.s. { och }. I exempel nedan ändras typsnittsfamiljen i respektive stilmall, men vi kan även ändra egenskaper som för- och bakgrundsfärg, typsnittsstorlek, marginaler och kantlinjer (vilket är ämnet för nästa sida, Egenskaper ).

Exempel 3.1.1 - Namngivning m.h.a. taggars namn

Exempel visar även att typsnittet Verdana inte tar sig så bra ut i normal storlek (ca. 12 pt), enligt mig, utan bör minskas något, som på denna webbplats (men inte detta stycke :-).

Vi kan även undvika att upprepa kod om vi har två stilmallar som ska ha samma egenskaper. För att använda samma egenskaper för två stilmallar så skriver vi dem bägge före egenskaperna ({}-parenteserna) separerade med komma. I nedanstående exempel så kommer de båda taggarna H1 och H2 att använda samma egenskap - typsnittet Verdana.

Om man namnger en stil med ett klassnamn så kan man ändra egenskaper för vissa taggar av ett (eller flera) element. Denna typ av namngivning är också ganska vanlig då man kanske vill skilja ut endast ett fåtal taggar som ska ha andra egenskaper än vad stilmallen för taggens namn har. Stilmallens namn fås genom att kombinera taggens namn, en punkt och klassens namn. Exemplet nedan visar klassen "litenrubrik" för taggen <h1>.

För att applicera stilmallen på rubriken så använder man sig av taggens attribut CLASS. I exempel 3.2.1 nedan som visar att klassen litenrubrik endast påverkar rubriker med taggen H1 och inte stycken (P), trots att de tillhör samma klass.

Exempel 3.2.1 - Både taggnamn och klass

Man kan även namnge en stilmall med en klass utan att ange en viss tagg. På så sätt kan taggar av flera olika typer påverkas med en och samma stilmall. (Kom dock ihåg att stilar även ärvs från övergripande/omslutande taggar!) Exemplet nedan visar hur man namnger en stil med ett klass namn genom att placera en punkt framför namnet.

För att använda denna typ av stilmall så använder man även här attributet CLASS. I exempel nedan så används t.ex. klassen "storrubrik" för första rubriken (H1) och klassen "kod" för stycken (P) med exempelkod så att koden visas med ett typsnitt med fast teckenbredd (Courier New).

Exempel 3.2.2 - Endast klass

Ett vanligt användningsområde för taggarna SPAN och DIV är att innesluta delar av ett element respektive flera element för att t.ex. applicera stilmallar. DIV är också mycket användbart för att bygga upp en webbsidas (eller snarare en hel webbplats) design med (se Positionering).

I exemplet nedan så används stilmallarna rod och bla för att ändra färgen på texten till motsvarande färg (röd resp. blå). (När man ändrar antingen för-/text- eller bakgrundsfärg så ska man alltid ange den andra! I exempel nedan anges därför även bakgrundsfärgen som vit i båda stilmallar. Se Färg.)

DIV-taggen används för att markera (omsluta) tre stycken som kommer visas med röd färg. SPAN-taggen används för att markera (omsluta) texten "både av DIV och SPAN", i andra stycket, och kommer visas som blå. (DIV- och SPAN-taggarna har markerats med blått i exempel nedan.)

Exempel 3.2.3 - DIV- och SPAN-taggarna

Alla taggar har attributet ID gemensamt och det används för att unikt identifiera ett element i ett (X)HTML-dokument, d.v.s. två taggar i samma dokument får inte ha samma värde på attributet ID (däremot i olika dokument). Detta kan t.ex. användas för ett stycke som ska agera "sidfot"/dokumentinformation något som kanske bara ska få förekomma en gång i ett dokument (så som mitt namn och ett datum längst ner på denna webbsida). För att namnge stillmallen för ett id så föregås stilmallens namn av #-tecknet och i exempel nedan så har id-stilen fått en storlek på typsnitt som är något mindre (eng. smaller).

Nedan visar hur attributet ID används i ett stycke för att applicera stilmall ovan. Längst ner i exemplets sida så syns dokumentinformationen med något mindre storlek.

Det finns inte så många pseudoklasser (eller pseudoelement, som en del kallas numera), vilket gör att stilmallar för dem inte är så vanligt förekommande. Men stilmallar för pseudoklasser (och -element) markeras med ett kolon (:) framför. Nedan visas exempel på några taggar som har pseudoklasser (och -element).

• a - link, visited, active, hover, focus
• hX och p - first-line, first-letter, first-child

Det var främst pseudoklasserna för länkar (A) som tidigare fungerarde, men idag fungerar dessa pseudoklass (och -element) för fler taggar (utom link och visited som är specifika för länkar :-). Ta inte dessa som självklara, d.v.s. att de fungerar, utan prova om de fungerar i webbläsare du vill stödja (vilket bör vara de flesta :-). Denna typ av stilmallar förklaras bäst med exempel, vilket görs nedan (se referenser längst ner för mer information).

Exempel nedan visar hur man kan ändra färg på obesökta länkar (link), besökta länkar (visited), aktiva länkar (active - den länk man klickar på med mus), länk under musmarkör (hover) och länk med fokus (focus - prova att trycka på tabb-tangenten tills fokus finns på en länk). Här visas även hur man kan ändra första raden i alla stycken till fet, öka storleken på första bokstaven till 32 pixlar samt hur första barnet (vilket det finns tre av i dokument) visas med blå text (se kommande sidor för mer om egenskaperna).

Första raden, med länkar, är första barnet till taggen BODY, vilket gör att den färgas blå. I båda kodexempel har de första styckena färgats blå då de är första barnet till taggarna BLOCKQUOTE (som det finns två av).

Exempel visar på hur fel det kan bli... :-) Men även på hur man inte bör göra, d.v.s. ange för- eller bakgrundsfärg utan den andra! Fortsättningsvis visar även exempel på hur ordning på stilmallar kan avgöra vilken som vinner, vilket kan ses för stycken vars bakgrund inte färgas när musmarkör förs över dem. Om man tittar på exempel i olika webbläsare så visar det även på hur implementation av CSS kan skilja sig i olika webbläsare (främst för hover och first-letter). Kort och gott: CSS är kraftfull men kan även bli komplext! :-)

Exempel 3.4.1 - Pseudoklasser

För stycken i detta avsnitt används klassen "anfang" och pseudoklassen "first-letter" för att (förhoppningsvis) visa första bokstaven i varje stycke med en storlek som är 300% av styckenas typsnittet. Stilmallen ser ut enligt nedan och säger att för stycken med klassen anfang ska första bokstaven ha denna stil (dessa egenskaper behandlas i kommande sidor).

Detta, d.v.s. anfangerna, ser hyfsat bra ut i Firefox 2 och IE 7, men konstigt ut Opera 9 och Safari 3. Å andra sidan så ser det dumt ut att helt plötsligt använda en annan standard för stycken. Men det har gjorts för att exemplifiera, så kanske jag blir förlåten. :-)

De olika sätten att namnge stilmallar ovan kan kombineras för att avse ganska specifika taggar (utan att använda attributet id) samt grupper eller klasser av taggar. Nedan visas några exempel, som i sin tur kan kombineras med andra namn eller kombinationer. :-)

• Ättlingar (eller "viss tagg inuti annan tagg"), t.ex. ul em - vilket säger "endast kursiv stil i onumrerad lista".
  Här får vi inte glömma att varje alternativ i en lista innesluts av taggen li, vilket skulle göra em till barnbarn till ul (d.v.s. ul > em, som i nästa punkt, skulle aldrig fungera).
• Barn (eller "endast barntagg till annan tagg"), t.ex. p>em - vilket säger "endast kursiv stil i stycken, men inte om i andra element" (så som barnbarn).
• Första syskon till (eller "endast om tagg som kommer efter viss annan tagg"), t.ex. h1+p - vilket säger "endast stycken som kommer efter nivå 1 av rubriker".

Observera att vissa "webbsidesprogram" kanske inte klarar av vissa kombinationer av "namn"! Då får man hacka CSS-filer för hand och hoppas på att program inte förstör.

Om vi vill att en tagg endast ska använda stilmall när den finns i en viss annan tag så använder vi nedanstående form för att namnge tagg. Vi börjar med övergripande tagg följt av ett mellanslag och underliggande tagg.

Vi skulle t.ex. vilja att all betonad (EM) text i rubriker ska markeras med blå färg. Stilmallarna nedan kommer ge alla rubriker av nivå 1 (H1) typsnittet Verdana och de delar av rubrikerna som markerats med taggen EM även blå text. För att visa på exempel i lista ovan så visar jag även att man kan ha samma stilmall för två olika ättlingar, d.v.s. att betonad stil i även onumrerade listor ska vara blå.

Följande (X)HTML skulle visa på resultatet av ovanstående stilmallar.

Exempel 3.5.1 - Endast gälla vissa ättlingelement

Vi kan begränsa ättlingar ovan till att endast gälla barn. Vi börjar med övergripande tagg följt av ett "större än"-tecken (>) och underliggande tagg (vill vi, för läsbarhetens skull, ha mellanslag före och efter >-tecknet så går det bra :-).

Precis som med exempel med ättling ovan så skapar vi stilmall för att färga betonad (em) text i rubriker och lister med blå färg. Skillnaden är de två >-tecknen.

Följande HTML skulle visa på resultatet av ovanstående stilmallar. I detta fall fungerar endast stilmallen för rubriken då em i listan är barnbarn.

Exempel 3.5.2 - Endast barnelement

"Första syskon till-namnet" är praktiskt för att t.ex. skapa ingresser efter en rubrik. För att namnge stilmallen börjar vi med "föregående" tagg följt av ett plustecken (+) och efterföljande tagg (vill vi, för läsbarhetens skull, ha mellanslag före och efter plustecknet så går det bra :-).

I detta exempel ges "första syskonet" kursiv stil.

Följande (X)HTML skulle visa på resultatet av ovanstående stilmallar. Här kommer första stycket efter rubriken att vara kursiv.

Exempel 3.5.3 - Endast första syskon

Nedan är några saker som jag inte lyckats sortera in under en annan rubrik på något bra sätt.

Pseudoklasser ska kunna kombineras med klasser för taggar. Följande stilmallar skulle kunna användas om vi vill ha olika egenskaper för länkar i en meny och i övriga delar av dokumentet.

I exemplet nedan visas hur attributet class används för att använda stilmallen meny för första länken och den andra är en "vanlig" länk (dock ändrad med stilmall ovan). 

Nedan finns länkar med mer information (i ingen speciell ordning).

• CSS hos W3Schools.com
• CSS Reference hos Web Design Group
• Cascading Style Sheets hos World Wide Web Consortium (W3C)