Die neuen Selektoren
HTML
<ul>
<li>Däumelieschen</li>
<li>Die Störche</li>
<li>Der fliegende Koffer</li>
<li>Fliedermütterchen</li>
<li>Der Tannenbaum</li>
<li>Die Sendung mit der Maus</li>
<li>Die unendliche Geschichte</li>
<li>Harry Potter</li>
<li>Barthimäus</li>
<li>Glenkill</li>
</ul>
CSS
/* ------- jedes ungerade Listenelement wird rot formatiert ----- */
ul li:nth-child(odd){
color: #a20000;
font-weight: bold;
}
/* ----- jedes gerade Listenelement wird grün formatiert ----- */
/*
ul li:nth-child(even){
color: #060;
font-weight: bold;
}
*/
/* ----- jedes dritte Listenelement, beginnend beim Zweiten ----- */
/*
ul li:nth-child(3n-1){
color: #a20000;
font-weight: bold;
}
*/
/* ----- jedes dritte Listenelement, beginnend beim Ersten ----- */
/*
ul li:nth-child(3n+1){
color: #a20000;
font-weight: bold;
}
*/
/* ----- Jedes vierte Listenelement, beginnend beim Vierten. ----- */
/*
ul li:nth-child(4n+4){
color: #a20000;
font-weight: bold;
}
*/
/* ----- Das dritte Element vom Ende her gerechnet. ----- */
/*
ul li:nth-last-child(3) {
color: #a20000;
font-weight: bold;
}
*/
/* ----- Das zweite Element vom Anfang her gerechnet. ----- */
/*
ul li:nth-child(2) {
color: #a20000;
font-weight: bold;
}
*/
/* ----- Alles ausser dem ersten Element ----- */
/*
ul li:not(:first-child) {
color: #a200ff;
font-weight: bold;
}
*/