Hier bist Du: Home « Workshops « Workshop CSS: Teil 3 - Selektoren I

Workshop CSS: Teil 3 - Selektoren I

Selektoren stellen die Verbindung zwischen den zentralen Formaten im <head>-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen.
Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Stylesheet-Angaben, geschweifte Klammer zu:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
 Selektor { Stylesheet-Angabe;}
 Selektor
 {
  Stylesheet-Angabe;
  Stylesheet-Angabe;
  ...
 }

Die nun folgenden Erläuterungen sind am Beispiel zentrale Formate im <head>-Bereich dargestellt. Um sie in eine externe Datei auszulagern, brauchst Du nur die Stylesheet-Angaben innerhalb des <style>-Tags in eine Datei zu speichern. (Siehe Teil 2)

 

nach oben

Universal-Selektor

Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben.

Internet Explorer 4.0, Opera 5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 * {
  font-size:14px;
  color:#ff0000;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Ein "h1"-Tag mit roter Schrift</h1>
<h2>Ein "h2"-Tag mit roter Schrift</h2>
<h3>Ein "h3"-Tag mit roter Schrift</h3>
<p>Ein "p"-Tag mit roter Schrift</p>
<div>Ein "div"-Tag mit roter Schrift</div>

</body></html>

Dieses Beispiel legt für diverse Tags eine Schriftgröße von 14 Pixel und eine rote Schriftfarbe fest. Der Universal- Selektor ist nur ein *

 

nach oben

Typ-Selektor

Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 h1
 {
  font-size:14px;
  font-style:italic;
 }
 p {color:#ff0000;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Überschrift</h1>
<p>Und roter Text</p>

</body></html>

Dieses Beispiel legt für das <h1>-Tag eine Schriftgröße von 14 Pixel und einen kursiven Schriftstil fest. Für das <p>-Tag ist die Schriftfarbe rot deklariert.

Um Formate für HTML-Tags zentral zu deklarieren, brauchst Du als Selektor nur das HTML-Tag ohne spitze Klammern (< >) anzugeben.

 

nach oben

class-Selektor (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 h1 { font-size:14px; font-style:italic; }
 h1.gerahmt { border:1px solid #aaaaaa; }

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Überschrift</h1>
<h1 class="gerahmt">Eine kursive Überschrift mit Rahmen</h1>

</body></html>

In diesem Beispiel wird mit h1 { font-size:14px; font-style:italic; } für das <h1>-Tag eine Schriftgröße von 14 Pixel und ein kursiver Schriftstil festgelegt. Die nächste Zeile h1.gerahmt { border:1px solid #aaaaaa; } deklariert eine Klasse mit dem Namen gerahmt. Um diese zu verwenden, musst Du in einem <h1>-Tag das Attribut class mit dem Namen als Wert in Anführungszeichen einfügen. In diesem Beispiel ist das
<h1 class="gerahmt">.

Das Beispiel oben deklariert eine Klasse, die nur in einem <h1>-Tag verwendet werden kann. Trägst Du die Klasse in einem anderen Tag ein, wird sie dort ignoriert. Du darfst das Tag vor dem Punkt aber auch weglassen, sodass die Klasse für alle Tags gültig ist, wie in dem folgenden Beispiel:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 h1 { font-size:14px; font-style:italic; }
 .gerahmt { border:1px solid #aaaaaa; }

 .einfachertext { font-size:14px;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Überschrift</h1>
<h1 class="gerahmt">Eine kursive Überschrift mit Rahmen</h1>
<p>Ein Text</p>

<p class="gerahmt">Ein Text mit Rahmen</p>

<p class="einfachertext">Ein Text, 14 Pixel groß</p>

<div class="einfachertext">Ein Text, 14 Pixel groß</div>
</body></html>

Diese Beispiel deklariert zwei Klassen: gerahmt und einfachertext. Da vor dem Punkt kein Tag angegeben ist, können diese Klassen in jedem Tag verwendet werden. Wichtig ist, dass Du bei der Deklaration vor dem Namen den Punkt verwendest, als Wert in dem class-Attribut jedoch nicht.

Das nächste Beispiel weist einem Element mehrere Klassen zu:

Internet Explorer 5.x, Opera 5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

.rot{color:#ff0000;}
.ul {text-decoration:underline}
.fett{font-weight:bold}

</style>

<title>Irgendein Titel</title>
</head><body>

<p class="rot">Ein roter Text</p>
<p class="fett">Ein fetter Text</p>
<p class="ul">Ein unterstrichener Text</p>
<p class="ul rot">Ein Text, rot und unterstrichen</p>
<p class="fett ul">Ein Text, fett und unterstrichen</p>
<p class="rot fett ul">Ein Text, rot, fett und unterstrichen</p>

</body></html>

Diese Beispiel deklariert die drei Klassen: rot, ul und fett. Um diese Klassen nun für ein Element zu kombinieren, brauchst du sie nur in dem class-Attribut durch Leerzeichen getrennt anzugeben.

 

nach oben

ID-Selektor

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 div {background-color:#efefef;border:1px solid #aaaaaa;}
 div#a
 {
  position:absolute;
  top:100px; left:100px;
  width:120px; height:80px;
 }
 #b
 {
  position:absolute;
  top:150px; left:300px;
  width:120px; height:80px;
 }

</style>

<title>Irgendein Titel</title>
</head><body>

<div id="a">100 Pixel von oben und 100 Pixel von links</div>
<div id="b">150 Pixel von oben und 300 Pixel von links</div>

</body></html>

ID-Selektoren beginnen mit einem #. In diesem Beispiel sind zwei ID-Selektoren deklariert: a mit div#a und b mit #b. Im Dokument werden diese Formate jeweils einem <div>-Tag zugeordnet, indem das id-Attribut in das Tag mit dem Namen des Selektors als Wert in Anführungszeichen eingefügt wird.
Der Unterschied zwischen div#a und #b ist, ähnlich wie bei den class-Selektoren, dass der Selektor a nur mit einem <div>-Tag verwendet werden kann.

Damit ein Element innerhalb der Dokumentenstruktur eindeutig ist, darf eine ID nur einmal verwendet werden. Deshalb wird diese Art der Formatierung häufig in Zusammenhang mit Javascript verwendet.

 

nach oben

Groß-/Kleinschreibung von Selektoren

CSS und HTML schreiben keine Unterscheidung zwischen Groß-/Kleinschreibung vor, XHTML ja. Bei Verwendung von XHTML hat dies Auswirkung auf Selektoren, das es ein Unterschied ist, ob du z.B. class="selektor" oder class="Selektor" schreibst:

Beispiel

Internet Explorer 6.x, Opera 7.x, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">

 .rot { color:red; }

</style>

<title>Irgendein Titel</title>
</head><body>

<p class="rot">Ein "p"-Tag mit roter Schrift</p>
<p class="Rot">Ein "p"-Tag nicht mit roter Schrift</p>
<p class="ROT">Ein "p"-Tag nicht mit roter Schrift</p>

</body></html>

In diesem Beispiel wird nur der ersten Zeile eine rote Schriftfarbe zugewiesen, da der Wert des class-Attributs wie in der Stylesheet-Definition klein geschrieben ist. Da nicht alle Browser zwischen Groß- und Kleinschreibung unterscheiden und es auch ein schlechter Programmierstil ist, Selektoren mit gleichen Namen und unterschiedlicher Groß-/Kleinschreibung zu verwenden, solltest du dir grundsätzlich die Kleinschreibung angewöhnen. Dies ist ein weit verbreiteter Stil und es gibt keine guten Gründe, einen anderen Weg zu wählen.

 

nach oben

Sonderzeichen in Selektoren

Der Name für alle Selektoren darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen. Der Unterstrich _ sollte nicht unbedingt verwendet werden, da dieser nicht von Anfang an zur CSS-Spezifikation gehörte und somit von einigen älteren Browsern nicht interpretiert wird.

Beispiel

Internet Explorer 5.x, Opera 6.x, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>
<style type="text/css">

 .rot { color:red; }
 .r_ot { color:red; }
 .8blau { color:blue; }

</style>

<title>Irgendein Titel</title>
</head><body>

<p class="rot">Ein <p>-Tag mit roter Schrift</p>
<p class="r_ot">Ein <p>-Tag mit roter Schrift</p>
<p class="8blau">Ein <p>-Tag nicht mit blauer Schrift</p>

</body></html>

Dieses Beispiel weist den ersten beiden Zeilen eine rote Schriftfarbe zu. Die dritte Zeile wird nicht in blauer Schriftfarbe dargestellt, da der Selektorname mit einer Zahl beginnt.

 

nach oben

Attributabhängige Selektoren

Attributabhängige Selektoren verknüpfen Formatierungen mit Elementen, die ein bestimmtes Attribut oder/und ein Attribut mit einem bestimmten Wert enthalten.

Attribut Beschreibung
E[attr] {
 ...
}
Das Element muss nur das Attribut enthalten. Ob auch ein Wert übergeben wird, ist nicht relevant.
Beispiel:
<tag attr>, <tag attr="Wert1"> oder <tag attr="Wert2">
E[attr = "Wert"] {
 ...
}
Das Attribut muss den angegebenen Wert enthalten.
Beispiel:
<tag attr="Wert">
E[attr ~= "Wert"] {
 ...
}
Das Attribut muss den Wert in einer durch Leerzeichen getrennten Liste von Werten enthalten.
Beispiel:
<tag attr="Wert1 Wert Wert2">
E[attr |= "Wert"] {
 ...
}
Das Attribut muss den angegebenen Wert exakt oder gefolgt von einem Bindestrich enthalten.
Beispiel:
<tag attr="Wert"> oder <tag attr="Wert-2">

 

Dieses Beispiel weist mit h1[title] { color:red; } dem <h1>-Tag eine rote Schriftfarbe zu, wenn es das title-Attribut mit einem beliebigen Wert enthält.

Internet Explorer 7.x, Opera 6.x, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<style type="text/css">
 h1[title] { color:red; }
</style>

...

 <h1 title="Überschrift">Eine rote Überschrift</h1>
 <h1 title="Kapitel">Noch eine rote Überschrift</h1>
Beispiel

 

Das nächste Beispiel legt für ein <h1>-Tag eine blaue Schriftfarbe zu, wenn es das Attribut kapitel mit dem Wert uebersicht enthält.

Internet Explorer 7.x, Opera 7.5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html>
<head>
<style type="text/css">
 h1[kapitel = "uebersicht"] { color:blue; }
</style>

...

 <h1 kapitel="uebersicht">Eine blaue Überschrift</h1>
Beispiel

 

In dem dritten Beispiel wird für ein <p>-Tag Rahmen und Schriftfarbe festgelegt, wenn der Wert gerade in der Liste der Werte für das Attribut zeile vorkommt.

Internet Explorer 7.x, Opera 7.5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<style type="text/css">
 p[zeile ~= "gerade"] { color:blue;border:1px solid #dddddd; }
</style>

...

 <p zeile="uebersicht gerade Farben">
  Mit Rahmen
 </p>

Beispiel

 

Das letzte Beispiel legt für <p>-Tags das Schriftgewicht fett fest, wenn sie das Attribut kapitel enthalten und der zugewiesene Wert mit ueb- beginnt.

Internet Explorer 7.x, Opera 7.5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html>
<head>
<style type="text/css">
 p[kapitel |= "ueb"] {font-weight:bold;}
</style>

...

<p kapitel="ueb-ersicht">Schriftart fett</p>
Beispiel

 

nach oben

Pseudoformate für Hyperlinks und Anderes

Pseudoformate unterteilen sich in Pseudoklassen, die Formate mit einem Element, das einen bestimmten Zustand hat, verknüpfen und in Pseudoelemente, die Formate mit einem Teil eines Elements verknüpfen. Am Bekanntesten dürften da die Hyperlinks sein. Zu erkennen sind sie an dem führenden Doppelpunkt. Folgende Pseudoklassen sind in CSS 1 + 2 festgelegt:

:link
Nichtbesuchter Hyperlink.
:visited
Besuchter Hyperlink
:active
Aktiver Hyperlink (Wenn der User mit der Maus auf den Link klickt.)
:hover
Mouseover-Effekt. Wenn der User den Mauszeiger über einen Hyperlink oder ein anderes Element bewegt.
:focus
Wenn ein Element den Fokus hat. Z.B. Texteingabefelder, in denen der Cursor steht.
:first-child
Ein Element, das das erste Kind eines anderen Elements ist.

Folgende Pseudoelemente sind in CSS 1 + 2 festgelegt:

:first-line
Die erste Zeile in einem Absatz.
:first-letter
Das erste Zeichen in einer Zeile.
:before
Fügt vor einem Element einen beliebigen Inhalt ein und formatiert diesen.
:after
Fügt nach einem Element einen beliebigen Inhalt ein und formatiert diesen.
Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<style type="text/css">

 a:link {color:#0000ff;}
 a:visited {color:#dddddd;}
 a:hover {color:#ff0000;}
 a:active {color:#ff0000;}

</style>

<title>Irgendein Titel</title>
<body>
<a href="datei.htm">Klick</a>
</body>
</html>

Pseudoklassen lassen sich nur zentral deklarieren. Dieses Beispiel verbindet das <a>-Tag mit Pseudoklassen und deklariert mit a:link {color:#0000ff;} eine blaue Schriftfarbe für einen nicht besuchten Hyperlink. a:visited {color:#dddddd;} legt fest, dass Hyperlinks, nachdem sie angeklickt und besucht wurden in Grau dargestellt werden sollen. a:hover {color:#ff0000;} und a:active {color:#ff0000;} legen eine rote Schriftfarbe für Hyperlinks fest, über die ein Mauszeiger bewegt oder auf die mit der Maus geklickt wird.
Diese Formatierungen sind für das <a>-Tag im gesamten Dokument gültig und im Dokument brauchst Du keine weiteren Angaben machen.

Eine Besonderheit für Hyperlinks ist die Reihenfolge: :hover und :active müssen unbedingt nach :link und :visited stehen, sonst werden die Eigenschaften für :hover und :active ignoriert. Das ist kein Browser-Bug sondern CSS-Standard.

 

nach oben

Unterschiedliche Formate für Hyperlinks

Wie in dem vorherigen Abschnitt erwähnt, ist die zentralen Deklaration für das gesamte Dokument gültig. Das bedeutet aber auch, dass alle Hyperlinks gleich formatiert sind. Dies kann durchaus auch einen Sinn ergeben. Mit unter taucht aber die Frage nach unterschiedlich formatierten Hyperlinks auf.
Dies lässt sich durch die Kombination von class-Selektoren und Pseudoklassen lösen.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html><head>

<style type="text/css">

 a:link {color:#0000ff;}
 a:visited {color:#dddddd;}
 a:hover {color:#ff0000;}
 a:active {color:#ff0000;}

 a.navi:link
 {
  text-decoration:none; font-weight:bold;
  color:#0000aa;
 }
 a.navi:visited
 {
  text-decoration:none; font-weight:bold;
  color:#000066;
 }
 a.navi:hover
 {
  text-decoration:none; font-weight:bold;
  color:#ff0000;
 }
 a.navi:active
 {
  text-decoration:none; font-weight:bold;
  color:#ff0000;
 }

</style>

<title>Irgendein Titel</title>
</head>
<body>

<a href="datei.htm">Klick</a>

<a class="navi" href="datei.htm">Klick</a>

</body>
</html>

Die ersten Angaben a:link, ... formatieren alle Hyperlinks, die im Dokument verwendet werden. Die folgenden Deklarationen a.navi:link, ... deklarieren den class-Selektor navi für das <a>-Tag zusammen mit den Pseudoklassen :link, :visited, :hover, :active.
Im Dokument brauchst Du nur noch in einem <a>-Tag das Attribut class="navi" einzufügen, um mit diesem Hyperlink die Formatierungen zu verknüpfen.

Du kannst auf diese Art viele unterschiedliche Hyperlinks verwenden. Denke aber daran, dass es den User auch verwirren kann.

nach oben