Nov
CSS Grundkunskap - Specificitet
Kategorier: CSSFörmodligen har du hört talas om "specificity" när det kommer till CSS. Specificitet är den raka översättningen till svenska. Specificitet är en av grundstenarna inom CSS och talar om vilken regel som appliceras på ett element om du har två regler som träffar samma element.
Det finns några grundregler att komma ihåg när det gäller specificitet.
Om två CSS-regler har samma specificitet kommer den senast deklarerade regeln att appliceras på elementet.
p.klass1 { color: #fff; }
p.klass2 { color: #000; }I exemplet ovan kommer texten i p-elementet att vara svart eftersom den regeln deklarerades sist.
Alla selektorer (selectors) i CSS har en plats i specificitetshierarkin. För att avgöra en regels specificitetsnivå kan man dela in selektorerna i den i en av fyra kategorier: (a) inlinestilar, (b) antalet IDn, (c) antalet klasser, pseudoklasser och attributväljare, (d) antalet elementväljare. Den regel med högst specificitet kommer att appliceras på elementet.
Specificiteten på en nivå kan anges som följande:
a är värd 1000, b är värd 100, c är värd 10 och d är värd 1. Detta stämmer inte riktigt i praktiken, då basen för de olika nivåerna egentligen är ett högre tal än tio. För detta exempel samt alla fall där du har färre än tio väljare i någon kategori funkar dock dessa siffror utmärkt.
För att visa lite mer konkret hur det ser ut har jag gjort en exempelsida som visar specificitet på lite olika CSS-regler.
I korthet innebär ovan regler följande: En CSS-regel skriven inline i HTML-koden kommer alltid att ha högre specificitet än någon annan regel. En regel innehållande ett ID kommer att ha högre specificitet än någon utan ett ID. Och en regel med en klassväljare kommer att gälla före en regel med bara elementväljare.
Jag hoppas att den här artikeln har gett dig lite mer förståelse för vad specificitet är och hur det fungerar i CSS. Lämna gärna kommentarer om du har frågor eller upptäcker några konstigheter.
TYCKTE DU OM ARTIKELN?
KOMMENTARER
- #1. Skriven av Zvenne den 28 Nov 2008
-
Välkommen tillbacka och tackar för ännu en bra artikel.
Hoppas du gör nya artiklar lite oftare då dem alltid är bra och intressanta.//Zvenne
- #2. Skriven av Stefan den 30 Nov 2008
-
Hej och tack, kul att du uppskattar artiklarna. Jag ska försöka skriva artiklar lite oftare även om andra projekt tar ganska mycket tid just nu.
