Pseudoklasser
visited
Om du vill ändra på hur en länk man besökt sett ut så lägger du till:
a:visited{
color : red;
}
Den här länken blir röd om man har klickat på den:
Viktigt
Mindre viktigt
hover
Om du vill ändra på hur ett element beter sig när du hovrar med musen
över det skriver du:
p:hover{
color: green;
}
Om du håller musen över mig blir jag grön.
nth-child()
Om du vill att typ varannat element av en viss sort ska bete sig annorlunda
så skriver du:
p:nth-child(2n+1){
color: silver;
background-color: black;
}
p:nth-child(2n){
font-family: monospace;
background-color: silver;
color: gold;
}
Hipp hurra!
För här kommer Bumbibjörnarna!
Studsar fram igenom sagorna!
Och vi får följa med!
Pseudo-element
Med hjälp av så kallade pseudo-element kan du förändra delar av ett element. Tillexempel
kan du ändra på initialen, första bokstaven. Med hjälp av en klass så kommer alla initialer
på den här leken av sidan att täcka mer än en rad. Koden för att göra det hittar du här:
p::first-letter{
color: red;
font-size: 2.0em;
float: left;
}
Den biten kod innehåller två nya saker vi inte har tittat på förut:
::first-letter
och float: left;. Vi
kommer först att titta på
::first-letter vilket är ett pseudo-element.
::first-letter
Detta är ett av flera olika pseudo-element vi ska kolla på. Men som namnet antyder så
påverkar det den första bokstaven i ett element. Det behöver inte vara i ett <p>-element
som i exemplet, utan kan vara i en h-tagg eller i ett a-element.
::first-line
Det här pseudo-elementet påverkar hela första raden i ett element, och är då främst användbart
på <p>-elementet som är ett av de element som oftast går över flera rader.
p::first-line{
font-variant: small-caps;
}
Så nu är hela den första raden i stora bokstäver, men i samma storlek som små bokstäver.
Detta är oftast snyggast dock om man har korta rader.
::before
Pseudo-elementet ::before påverkar vad som ska hända precis framför ett element.
a::before{
content: "♥";
color: red;
}
Så nu när vi lägger till ett <a>-element så kommer vi att se ett ♥ framför:
den här går ingenstans.
::after
::After fungerar likadant som ::before, fast åt andra hållet. Här kan vi se ett exempel
på hur ::first-letter tar med specialtecken före första bokstaven också.
