CSS-Quicktipp: Tippfehler bei Selektoren finden
Geschrieben am:
Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und "Untersuchen" oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder - bei zusammengesetzte Selektoren - dass die Verschachtelung nicht stimmt.
Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.
Möglicherweie fehlerhafte Selektoren im Chrome anzeigen lassen
Im Chrome wählt man den Tab "Audits" und klickt auf "Run". Unter Webpage-Performance gibt es den Punkt "Remove unused CSS rules" und dort erhält man die Selektoren, die auf keines der Elemente auf der Webseite zutreffen.
Die angegebenen Selektoren kann man dann genauer überprüfen. Im Beispiel soll es wohl container und nicht cntainer heißen.
Es kann aber hier natürlich auch Angaben geben, die an sich korrekt sind, nur gerade im aktuellen Dokument nicht benötigt werden. Das wird beispielsweise häufiger der Fall sein, wenn man etwa normalize.css benutzt, um eine einheitliche Basis für Formatierungen zu definieren.