Formgivning efter hierarki

Ibland upptäcker man att man vill ha olika formgivning på samma element, beroende på vart i strukturen detta element befinner sig. Det går att lösa på detta sätt.

Listor och tabeller

För punkt- och nummerlistor finns väljarna ul och ol. BÃ¥da dessa listor använder listelementet li. I formatmallen skiljer du listelement i punktlistor frÃ¥n listelement i nummerlistor, genom att ange vem föräldern är där egenskaperna ska gälla. Släktskapet anges i fallande ordning frÃ¥n föräldern.

ul li { font-style:italic; color:blue }

Om du har klassindelat en tabell, kan du använda namnet för att visa vilken tabells celler du menar. Du kan ange så många steg i hierarkin som krävs för att peka ut en viss väljare.

table.schema tr td  { color:gray }

Länkar och annan text

I det här exemplet vill jag ge länkarna olika formgivning i sidfoten och i löpande text. Sidfoten har jag först klassindelat med namnet .sidfot. PÃ¥ det sättet kan jag skilja vanliga stycken frÃ¥n sidfoten, som ocksÃ¥ är markerad med taggen <p>.

I stilmallen ger jag först länkarna en övergripande form som kommer att synas när jag gör länkar mitt i löpande text.

a       { color:red }
a:hover { color:blue }

För att ange hur länkar i sidfoten ska se ut, beskriver jag i fallande ordning vilken väljare som är förälder. Detta begränsar formgivningen enbart till stycket med klassen .sidfot.

.sidfot a       { color:black }
.sidfot a:hover { text-decoration:underline }

I exemplet nedan har jag angett att blockcitat ska ha kursiv stil. För att betoningen (som också visas kursiv) ska synas, anger jag att den i stycken som är blockcitat även ska vara fetstilt.

blockquote      { font-style:italic }
blockquote p em { font-weight:bold }