HTML5 / CSS3 - Praxistutorial 2 - Anpassungen IE 8 Teil 1
1. Die Abschnitte
- Überblick
- Das Problem und die Lösung
- Zwischenfazit
- Anpassungen IE 8 und 9
- Anpassungen IE 8 Teil 1
- Anpassungen IE 8 Teil 2
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
2. Formatierung der Listenelemente
Tja, da gibt es zwei Möglichkeiten. Entweder man arbeitet mit Klassen (was nun wirklich die vernünftige Lösung wäre) oder man fängt an zu zählen und arbeitet wie ein Bekloppter mit direkten Nachbarselektoren. Und das sieht dann so aus.
div.content > ul > li + li,
div.content > ul > li + li + li + li,
div.content > ul > li + li + li + li + li + li,
div.content > ul > li > ul > li + li,
div.content > ul > li > ul > li + li + li + li + li,
div.content > ul > li > ul > li + li + li + li + li + li + li + li {
color: #00f;
}
div.content > ul > li + li + li,
div.content > ul > li + li + li + li + li,
div.content > ul > li > ul > li + li + li,
div.content > ul > li > ul > li + li + li + li + li + li {
color: #444;
}
HÄÄÄÄH?
Ich habe euch doch gesagt, dass ihr mit Klassen arbeiten sollt. Aber wer nicht hören will, muss fühlen.
4. Aufdrösel
So, jetzt schauen wir uns das mal im Detail an und gehen dabei Stück für Stück vor.
div.content > ul > li + li {
color: #00f;
}
div.content > ul > li + li + li {
color: #444;
}
Erläuterung
Wir spielen jetzt einfach Bäumchen wechsel dich. li + li
bedeutet, nimm alle <li>
s, die direkte Nachbarn eines anderen sind.
Damit wird schon mal das erste Element ausgeschlossen. li + li + li
gilt dann für alle <li>
s, die auf zwei(!) anderen folgen.
Allerdings gibt es jetzt nur eine blaue Zeile. Und damit geht das Spielchen weiter.
div.content > ul > li + li,
div.content > ul > li + li + li + li,
div.content > ul > li + li + li + li + li + li, {
color: #00f;
}
div.content > ul > li + li + li,
div.content > ul > li + li + li + li + li {
color: #444;
}
Erkennt ihr das Muster?
Nein? Dann zählt mal die <li>
s. Oben zwei, unten drei, oben vier, unten fünf und oben sechs. Tja, so kann man im IE mit nth-child
arbeiten. Dass das der Weisheit letzter Schluss nicht sein kann. liegt ja wohl auf der Hand. Denn dafür muss man immer die Anzahl der Listenelemente kennen.
Oder man macht das so lange, bis man denkt, dass es reicht.
Die Liste in der Liste
...
div.content > ul > li > ul > li + li,
div.content > ul > li > ul > li + li + li + li + li,
div.content > ul > li > ul > li + li + li + li + li + li + li + li {
color: #00f;
}
...
div.content > ul > li > ul > li + li + li,
div.content > ul > li > ul > li + li + li + li + li + li {
color: #444;
}
Dasselbe in grün
Hier läuft das genau so ab. Nur da wir ursprünglich ein nth-child(3n+2)
gesetzt haben, muss im Dreierakt gearbeitet werden. Also zwei, drei
(somit auch automatisch vier), fünf (2 + 3), sechs (somit auch automatisch sieben) und acht (5+3). Capice?
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt