CSS 2.1 ::Referenz ::Selektoren

CSS 2.1: ID-Selektor

Syntax:

#value { Deklarationen } E#value { Deklarationen }

Ein ID-Selektor besteht aus einem universellen Selektor oder einem Elementselektor, dem ein Gatterzeichen (engl. 'hash') und der ID-Wert unmittelbar folgt.

Bedeutung:

ID-Selektoren sind den Class-Selektoren sehr ähnlich, weisen aber einige wichtige Unterschiede auf:

Eine weitere Besonderheit des ID-Selektors ist, dass sich das Attribut ID innerhalb beliebiger Elemente als Anker einsetzen lässt. Das Attribut ID übernimmt in dem Fall dieselbe Funktion wie das Attribut name.

Beispiele:

Die folgenden drei Regeln veranschaulichen die höhere Spezifizität der ID-Selektoren:

  1. P#red { Deklarationen } /* Spezifizität: 0-1-0-1 */
  2. P[id=red] { Deklarationen } /* Spezifizität: 0-0-1-1 */
  3. DIV P[id=blue] { Deklarationen } /* Spezifizität: 0-0-1-2 */

Die Regeln a und b haben, technisch gesehen, zunächst identische Auswirkungen, sie unterscheiden sich nur in der Schreibweise. Da Regel b jedoch als Attributselektor formatiert ist, weist sie eine geringere Spezifizität als Regel a auf. Der Unterschied wird deutlich, wenn man zusätzlich die Regel c betrachtet. Allein durch eine zusätzliche Elementangabe (DIV) erhält Regel c eine höhere Spezifizität als Regel b und hat damit Vorrang.

Nur Inline-Styles haben eine höhere Spezifizität als ID-Selektoren.

Das folgende Beispiel basiert auf einem Beispiel aus der CSS2-Spezifikation. Hier wird der ID-Selektor value in der Style-Regel dem Selektor H3 zugeordnet, im HTML- Dokument jedoch auf ein P-Element angewendet.

<head> <title>match ID selector</title>  <style type="text/css">   H3#value { color:#006; }  </style> </head> <body>  <p id="value">textausgabe</p> </body>

Da der Musterabgleich hier nicht paßt, der Wert value aber nur einmal im Dokument auftreten darf, hat die oben stehende Regel keine Auswirkung.

Das letzte Beispiel illustriert die Anwendung des ID-Selektors als Anker:

<head> <style type="text/css"> h2#hes { background: transparent url(../graphics/hes.gif) no-repeat right center; } </style> </head> <body> <p>Die diesjährigen Schulferien des Landes Hessen finden Sie <a href="ferien.html#hes">hier</a>:</p> ... <h2 id="hes">Ferientermine in Hessen</h2> ...

Über die Eigenschaft background ist hier zusätzlich eine kleine kennzeichnende Grafik hinterlegt.

Browserunterstützung

 
Der ID-Selektor wird von allen modernen Browsern erkannt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp handheld:

ID-Selektoren sind Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Sie werden von den meisten Mobilgeräten erkannt.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

 TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

© Copyright All Contents 2002-2017 K. Langenberg.
Commercial Use prohibited.


Notizen: