Effizient formatieren

Teil 7: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

30.9.2009 von Redaktion pcmagazin und Anna Kobylinska

ca. 1:50 Min
Ratgeber
  1. CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  2. Teil 2: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  3. Teil 3: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  4. Teil 4: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  5. Teil 5: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  6. Teil 6: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
  7. Teil 7: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

Daraus folgt, dass die größte Gewichtung dem ID-Selektor h2#main zugeschrieben wird. Auf Position zwei folgt im Beispiel der Klassenselektor h2.navigation.

4: Sortieren der CSS-Selektoren nach Reihenfolge

Was passiert nun aber, wenn zwei CSS-Regeln genau dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität besitzen? In diesem Fall kommt es auf die Reihenfolge an, in der die betreffenden Deklarationen aufgelistet wurden.

Diejenigen Deklarationen, die später gelistet sind, überschreiben frühere Deklarationen für dasselbe Element. Hierbei werden importierte Stylesheets vor eingebetteten CSS-Regeln ausgewertet.

Bugs in Webbrowsern

Wer die Möglichkeiten von Cascading Stylesheets wirklich ausreizen möchte, muss CSS-Selektoren richtig in den Griff bekommen. Diese sind sehr leistungsfähig, aber leider auch nur, solange der betreffende Webbrowser mitspielt. Wenn ein CSS-basiertes Layout wider Erwarten nicht so wie geplant ausfällt, ist die Ursache daher sehr häufig im Bereich der Unterstützung von CSS-Selektoren zu suchen.

Pseudoklassen versus Pseudoelemente

Pseudoklassen und Pseudoelemente werden des Öfteren miteinander verwechselt. Pseudoklassen sind Selektoren, die von dem Zustand eines existierenden Elementes abhängen. Sie verhalten sich zwar wie Klassen (Selektoren), indem sie sich auf tatsächlich existente Elemente beziehen, aber sie sind doch nicht Klassenselektoren, denn der Strukturbaum des Dokumentes (mithilfe der verwendeten Auszeichnungssprache) liefert keinerlei expliziten Hinweise auf diese Selektoren.

Ein typisches Beispiel hierfür sind Link-bezogene Pseudoklassen (PseudolinkKlassen). Sie behandeln ein Element wie

<a href="adresse">

ganz so, als ob es sich dabei um einen hypothetischen Quelltext in der Form

<a href="adresse" class="link">

oder um diesen (ebenfalls imaginären) Quelltext handelte:

<a href="adresse" class="visited">

Pseudoelemente sind Selektoren, die von dem Vorhandensein eines Elementes in dem Strukturbaum des Dokumentes ausgehen, welches dort nicht existiert - ganz so als ob der Browser dieses fehlende Element erzeugen würde. Ein typisches Beispiel eines Pseudoelementes ist :first-letter

Mithilfe des Selektors p:first-letter kann beispielsweise ein Absatz

<p>Absatz</p>

so gehandhabt werden, als ob der Strukturbaum des Dokumentes tatsächlich die Auszeichnung eines solchen Elementes enthielte. Das folgende Beispiel dient lediglich zur Visualisierung und repräsentiert keinen gültigen Quelltext:

<p><p:first-letter>A</p:first-letter>Absatz</p>

Demnach handelt es sich bei :first-child

um eine Pseudoklasse, nicht um ein Pseudoelement. Diese Pseudoklasse fügt eine CSS-Definition einem existierenden Element hinzu, ohne ein neues Element in der Dokumentstruktur zu erzeugen. Zum Beispiel hat der Selektor li:first-child dieselbe Wirkung, die sich durch die Zuweisung der Klasse first-child zu dem ersten li-Element der Liste erzielen ließe.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.