I detta tutorial ska jag visa lite av möjligheterna med pseudo-classer. De används för att lägga på specialeffekter på speciella element.
Som standard definieras länkar ofta som blå, fula och understrukna. Vi ska försöka hitta CSS verktyg som kan hjälpa oss att styra detta. Standardlösningen på problemet är ofta att man söker på internet och hittar en kodsnutt som klistras in i huvudet på html-dokumentet, utan att egentligen veta vad man gör.
De vanligaste pseudo-classerna är de som styr hur länkar ser ut. Jag ska gå igenom hur de och first-child typen fungerar.
selector:pseudo-class {property:value}
selector.class:pseudo-class {property:value}
Exempel
p .text:first-child {font-family: monospace}
#rightcolumn a:hover {text-decoration:underline}
Kommentar
Man använder alltså kolon (:) för att specificera vad man vill applicera sina parametrar på.
Pseudo-classer för länkar används oftast i följande varianter:
Exempel
a:link {color: #000000}
a:hover{color: #CCCCCC}
Alla ankarlänkar, dvs. <a></a> kommer att vara svarta. När du drar musen över dem kommer de att ändra färg till ljusgrå.
Viktigt
First-child används för att endast sätta parametrar för det första blocket av de som används. Detta kan ofta användas i listor som man vill ska vara symmetriska. Säg att du har en lista där du vill att varje list-objekt ska ha en border över och under texten.
Om du väljer att använda samma CSS på alla objekt i listan kommer den att bli assymetrisk. Detta eftersom du får dubbla borders mellan varje objekt, men enkla längst upp och längst ner i listan.
Du kan lösa ovanstående problem genom att använda first-child.
Exempel
HTML:
<ul>
<li>Ägg</li>
<li>Mjöl</li>
<li>Socker</li>
</ul>
CSS
li {
border-bottom: 1px solid #000;
}
li:first-child {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Det övre listobjektet kommer nu ha border både uppe och nere, de övriga objekten kommer endast ha en nedre border.
Viktigt
För att first-child ska fungera i IE måste du deklarera dokumenttyp.
