CSS, HTML und Javascript mit {stil}

CSS Selector class, id, element

CSS Selektoren filtern HTML-Tags

Die einfachsten CSS-Selektoren sind Typ- oder Elementselektoren. Tag-Namen wie p, div oder body suchen nach allen Elementen eines Typs und bringen CSS-Stile in HTML-Tags.

Ein CSS Selector identifiziert HTML-Elemente durch Suchmuster, die miteinander kombiniert werden können, um aus einfachen Selektoren komplexe Filter zu erzeugen.

Einfacher Element-Selector
a { text-decoration: none; }
p { color: rgb(80,80,10); }
^
|
+---- Element-Selektor 

Damit Stylesheet-Regeln nicht immer auf alle Elemente – z.B. alle p-Elemente – angewendet werden, differenzieren Selektoren die Anwendung eines CSS-Stils. Die einfachsten Selektoren nutzen HTML-Attribute wie class und id, um besondere Elemente herauszufiltern.

Klassen- und ID-Selektoren
a.extlink { color: green; }
p.meta { font-size: smaller }
  ^
  |
  +---- Klassen-Selektor 

Darüber hinaus filtern Attribut-Selektoren Elemente mit bestimmten Attributen wie einem title- oder lang-Attribut udn lassen sich anhand ihrer Position innerhalb des HTML-Dokuments (dem Kontext) identifizieren. Pseudoklassen und Pseudoelemente maskieren Elemente, die es im HTML-Quellcode nicht gibt – z.B. ein Link, über dem die Maus gerade hovert.

Diese grundlegenden Selektoren lassen sich miteinander kombinieren, so dass komplexe Suchmuster entstehen.

*

Universal CSS selector | Universal-Selektor
Alle Element der HTML-Seite

* {color: red }

e

type selector | Typ-Selektor
Alle e-Tags der HTML-Seite

p { font-family: fantasy }

e class="foo"

class selector | Klassen-Selektor
Alle e-Tags mit dem Attribut class="foo"

.extra { font-size: 2em; } oder
p.extra { font-size: 2em }

e id="foo"

ID selector
Das HTML-Tag mit dem Attribut id="foo"

#nav { float: right } oder
div#nav { float: right }

CSS Element- oder Typselektoren

Ein Tag-Name als Selector ist der einfachste Fall.

p { font-size: 0.92em; color: rgb(70,70,70); }

Er trifft auf alle P-Elemente der HTML-Seite zu, ganz gleich, wie die P-Tags des Dokuments aufgehangen sind und ob es sich bei den Tags um Inline- oder Block-Elemente handelt.

CSS Klassen

Klassen werden im HTML-Code durch das HTML-Attribut class mit einem frei wählbaren Namen definiert.

<p class="content">Mein Text</p>

Im Stylesheet wird ihnen ein Punkt vorangesetzt oder der Klassenselektor wird auf bestimmte HTML-Elemente beschränkt.

.content { color: white; background: green; width: 500px; }

// Wenn der Stil ausschließlich auf P-Elemente 
// mit dem Attribut class="content" angewendet werden soll
p.content { color: white; background: green; width: 500px; }
<h2 class="content">Lorem Ipsum</h2>
<p class="content">Lorem Ipsum</p>
<div class="content">Lorem Ipsum</div>
…

Die Namen von CSS Klassen fangen mit einem Buchstaben an, alle UFT-8-Zeichen sind erlaubt (Leerzeichen allerdings nicht). class="menü" funktioniert genauso wie class="♥".

Nur mit Herz

Menü

.menü {color: green; font-size:2em }
.♥ { color: firebrick; font-size: 2em }
…
<p class="♥">Nur mit Herz</p>
<p class="menü">3-Gänge-Menü</p>

Mehrere Klassen für ein Element

Das class-Attribut kann einem Element auch mehrere Klassen zuordnen. Dazu werden die Namen der Klassen ohne Komma im class-Attribut aufgezählt.

Das hält die CSS-Datei übersichtlicher und vermeidet lange Listen von CSS-Stilen mit nur wenigen Variationen.

.bigbox { 
   border: 2px solid silver; 
   padding: 1em; 
   font-size: 2em; 
   background: lavender; 
}
.frame { border: 2px solid silver; padding: 1em; }
.boxft { font-size: 2em; }
.backg { background: lavender; }
… 
<div class="frame boxft backg">
   Klassentreffen
</div>

ID-Selektoren

Ein einzelnes HTML-Element wird eindeutig über das HTML-Attribut id angesprochen. Im Stylesheet wird der Bezeichnung ein # vorangestellt.

#nurDies { color: white; background: green; width: 500px; }
<h2 id="nurDies">Lorem Ipsum</h2>

Wird den Klassen- und id-Selektoren die Bezeichnung eines HTML-Tags vorangesetzt, wird die Anwendung der Regeln .content und #nurDies auf genau diese Elemente beschränkt:

p.content { color: white; background: green; width: 500px; }
h2#nurDies { color: white; background: green; width: 500px; }

…
<h2 class="content">Lorem Ipsum</h2>
<p class="content">Lorem Ipsum</p>
<div class="content">Lorem Ipsum</div>
<div class="nurDies">Lorem Ipsum</div>

Die Regeln werden nur auf p-Elemente der Klasse content angewendet, nicht aber auf h2 und div-Elemente der Klasse content. Die Regel nurDies wird gar nicht angewendet, da kein h2-Element mit diesem id-Attribut vorliegt.

Klassen- und ID-Selektoren sind sich sehr ähnlich. Im Grunde genommen könnte man anstelle des ID-Attributs ein class-Attribut benutzen und das class-Attribut im HTML-Dokument nur ein einziges Mal verwenden. Allerdings wäre dieses Anwendung sehr fehlerträchtig. Darüber hinaus wird das ID-Attribut von Skripten benutzt, um ein Element eindeutig zu identifizieren. Die Identifikation über das Klassen-Attribut wäre mühsam und langsamer.