Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 2 - Anpassungen IE 8 Teil 1

1. Die Abschnitte

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 lidiv.content ul li li li lidiv.content ul li li li li li li,
div.content ul li ul li li,
div.content ul li ul li li li li lidiv.content ul li ul li li li li li li li li {
  color#00f;
}

div.content ul li li lidiv.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 lidiv.content ul li li li li,
div.content ul li li li li li li, {
  color#00f;
}

div.content ul li li lidiv.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 lidiv.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