Webdesign, Tutorials und mehr - Webmasterpro.de

Oft vergessene CSS-Selektoren und -Eigenschaften

Der Marktanteil des Internet Explorer 6

Der Marktanteil des Internet Explorer 6 von Microsoft liegt laut aktueller Webanalyse von Webmasterpro.de bei 5,4% (Stand 22.02.2010). Dieser Wert ist so minimal, dass sich die Entwickler trauen dürfen, vergessene CSS-Selektoren, welche ab IE7 funktionieren, wieder zu verwenden.

Die CSS-Selektoren

Nachfahren-Selektor (descendant selectors)

1
2
3
4

div p {
   color:   white;
   background:  red;
}

Die Formatierung gilt für alle Elemente die innerhalb (direkt oder nicht direkt) eines anderen Elementes liegen. In diesem Beispiel für alle p-Elemente welche innerhalb eines div-Elementes liegen.

Kind-Selektor (child selectors)

1
2
3
4

div > p {
  color:    white;
  background:   red;
}

Durch den Selektor > wird erreicht, dass das die Formatierung nur für Elemente gilt, welche direkt innerhalb (nicht weiter verschachtelt) eines anderen Elements liegen. In diesem Beispiel für alle p-Elemente, welche innerhalb eines div-Elements liegen.

Direkte Nachbar-Selektoren (adjacent selectors)

1
2
3
4

h2 + p {
   color:   white;
   background:  red;
}

Durch den Selektor + wird erreicht, dass das die Formatierung nur für Elemente gilt, welche auf ein anderes Element direkt folgen (in der selben Ebene). In diesem Beispiel für alle p-Elemente, welche auf eine Überschrift h2 direkt folgen.

Indirekte Nachbar-Selektoren

1
2
3
4

h2 ~ p {
   color:   white;
   background:  red;
}

Durch den Selektor ~ wird erreicht, dass die Formatierung nur für Elemente gilt, welche auf ein anderes Element folgen (in der selben Ebene). In diesem Beispiel für alle p-Elemente, welche auf eine Überschrift h2 folgen.

Attribut-Selektoren (attribute selectors)

1
2
3
4

a[title] {
   color:   white;
   background:  red;
}

Mit Attribut-Selektoren [att] gilt die Formatierung nur für jene Elemente, welche das Attribut besitzen. In diesem Beispiel für alle a-Elemente, welche einen "titel" besitzen

1
2
3
4

input[type=text] {
   color:   white;
   background:  red;
}

Das selbe Funktioniert natürlich auch für den Wert von Attributen. Hier gilt die Formatierung für alle input-Elemente, welche das Attribut "type=text" besitzen.

Erstes Kind-Selektor (First Child Selectors)

1
2
3
4

ol li:first-child {
   color:   white;
   background:  red;
}

Der ":first-child" Selektor ermöglicht es, nur das erste Element anzusprechen. In diesem Fall gilt die Formatierung nur für das erste Listenelement li der Geordneten Liste ol

:hover

1
2
3
4

tr:hover {
   color:   white;
   background:  red;
}

Der :hover Selektor aktiviert die Formatierung, wenn der User mit der Maus über das Element fährt.

:focus

1
2
3
4

tr:focus {
   color:   white;
   background:  red;
}

Der :focus Selektor aktiviert die Formatierung, wwenn das Element Aktiv (Fokussiert) ist.

Mehrere Klassen-Selektoren (Multiple class selectors)

1
2
3
4

p.info.error {
   color:   white;
   background:  red;
}

Mit "multiple class selectors" gilt die Formatierung nur für Elemente, welche alle Klassen besitzen. In diesem Fall nur für p-Elemente, welche die Klasse "info" und "error" besitzen.

position: absolute mit variabler Breite/Höhe

1
2
3
4
5
6
7

div#box1 {
   position: absolute;
   left:20px;
   top: 20px;
   right: 20px;
   bottom: 20px;
}

Durch "position: absolute" ohne "width" bzw. "height" kann eine variable Breite/Höhe erreicht werden. Dafür wird "left: ??px" und "right:??px" statt "width" bzw "top: ??px" und "bottom:??px" statt "height" benötigt. Das Beispiel Formatiert die box1 für die volle Größe des Browserfensters abzüglich eines 20px Rahmens.

position: fixed

1
2
3

div#box {
   position: fixed;
}

Ähnlich wie absolute, nur wird das Element nicht mitgescrollt, bleibt also an einer fest definierten Stelle stehen.

Kommentare: Oft vergessene CSS-Selektoren und -Eigenschaften

Neuen Kommentar schreiben

Kompatibel?

Beantworten

Und die funktionieren ausnahmslos alle in allen gängigen Browsern und IE ab v7?

Wäre ja mal ziemlich geil! :)

Max B am 24.02.2010 um 14:40

Re: Kompatibel?

Beantworten

Wir haben extra noch die Browserkompatibilität hinzugefügt ;-)

David Danier am 04.03.2010 um 11:19

Re: Kompatibel?

Beantworten

Was heißt denn gelb ("fast")?

Entweder es wird unterstützt oder es wird nicht unterstützt ^^

"fast" hört sich so an wie "jaaa die Entwickler haben echt alles versucht, aber es dann doch nicht hingekriegt" - kann ich mir ja nix von kaufen wenn's so ist ;-)

Max B am 04.03.2010 um 15:25

Re: Kompatibel?

Beantworten

Fast heißt, dass es nur unter bestimmten Bedingungen klappt, also nicht vollständig funktioniert. Beispiel :first-child klappt AFAIK nur, wenn das Element wirklich das Erste ist...Textelemente davor eingeschlossen.

Kaputt ist noch kritischer, hier ist die Funktion implementiert, klappt aber nicht.

Siehe auch:
http://www.webmasterpro.de/portal/article/hilfe-browserunterstuetzung.html

David Danier am 05.03.2010 um 11:48