Gastartikel van Jan van de Laar
Als je een lijstopsomming maakt, definieer je eerst het type lijst. ("<ul>" staat voor unordered list, een lijstopsomming met bolletjes ervoor, "<ol>" betekent ordered list, een lijstopsomming met nummers ervoor).
Daarna voeg je er lijst items in: "<li>". Zo is een voorbeeld van een ongeordende lijst met drie items:
<ul>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
</ul>
Zou je nu alle lijst-items een rode tekstkleur willen geven is dat simpel:
li{
color:#ff0000;
}
Als je dit opneemt in je CSS bestand worden alle lijst-items in je website van rode tekst voorzien.
Maar wat als je alleen het eerste of het laatste item een rode tekst wilt geven en alle andere niet? Dan selecteer je het eerste item op deze manier:
li:first-child {
color:#ff0000;
}
li:last-child {
color:#ff0000;
}
Toch doen zich soms situaties voor waarbij dit niet genoeg is. Bijvoorbeeld als je alleen het tweede of derde item wilt selecteren. Ook daar is een eenvoudige oplossing voor:
li:nth-child(2){
color:#ff0000;
}
Het mooie aan deze manier van selecteren is dat je de code heel schoon kunt houden. In plaats van ieder lijst-item van een class te voorzien kun je nu toch beinvloeden hoe ieder item getoond word.
Nog mooier wordt het als je je realiseert dat dit op zeer veel elementen is toe te passen. Bijvoorbeeld bij de opmaak van tabellen. Je kunt zo een bepaalde kolom selecteren en in een afwijkende vorm weergeven.
Dit was deel twee in de serie geavanceerde CSS. De volgende les gaat over het gebruik van transparantie d.m.v. RGB-A.
Over de auteur:
Jan van de Laar is oprichter en eigenaar van het bedrijf VDL Webdevelopment.
Hij is gespecialiseerd in systemen als Wordpress en Joomla alsmede in HTML en CSS.
Naast VDL Webdevelopment is Jan tevens oprichter en eigenaar van de Joomla Update Services