CSS/Tutorials/Einstieg/Selektoren

Der vierte Teil unseres Tutorials Einstieg in CSS führt Sie in die Welt der Selektoren ein, mit denen Sie Webseiten und deren Elemente zielgenau auswählen und formatieren können.

• Übersicht aller Selektoren

← Syntax

Box-Modell →

Elemente selektieren

Typselektor

Mit dem Element- bzw. Typselektor werden alle Elemente eines Typs angesprochen.

Typselektor ansehen …

h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
}

Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist.
Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht.

ansehen …

ids und Klassen

Oft will man innerhalb eines Texts nur einen Absatz anders formatieren. Dafür gibt es mindestens zwei Möglichkeiten:

Sie können jedem HTML-Element mit dem Universalattribut id einen eindeutigen, unverwechselbaren Bezeichner geben, den Sie dann als id-Selektor verwenden können.

id-Selektor ansehen …

#warnung {
  color: red;
  border-left: 5px solid;
  padding-left: 5px;
}

<div id="warnung">
  <h2>Beachten</h2>
  <p>Sie können eine id innerhalb eines HTML-Dokuments nur einmal verwenden!</p>
</div>

Das id-Attribut wird im CSS mit einer Raute (hash) und dem Namen als Selektor verwendet. Das so angesprochene Element erhält nun einen roten Rand links und eine rote Textfarbe. Damit der Rand nicht an den Text stößt, erhält das div noch einen linken Innenabstand von 5px.

ansehen …

Beachten Sie: Sie können eine id innerhalb eines HTML-Dokuments nur einmal verwenden!

Falls Sie mehrere Elemente stylen wollen, empfiehlt sich das Universalattribut class. Damit können Sie auch unterschiedliche Elemente formatieren:

class-Selektor ansehen …

.warnung {
  color: red;
}
p.warnung {
  border: 1px solid red;
  background-color: peachpuff;
}

<h2 class="warnung">
  Dies sind einige Möglichkeiten, die Klasse <code>warnung</code>
  auf verschiedene HTML-Elemente anzuwenden.
</h2>

<p class="warnung">Bitte die AGB lesen!</p>

<p><strong class="warnung">Achtung:</strong> Bitte die AGB lesen!</p>

Das Beispiel selektiert alle Elemente mit der Klasse warnung. Der Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.

Der Regelsatz gibt den angesprochenen Elementen die Textfarbe rot.

Sie können den Klassenselektor aber auch mit einem Typselektor kombinieren. So spricht p.warnung alle Absätze dieser Klasse an, die zusätzlich einen roten Rand und einen hautfarbenen Hintergrund erhalten.

ansehen …

Empfehlung: Verwenden Sie sprechende Klassennamen, die die Funktion und nicht die Art und Weise der Gestaltung beschreiben.

Was passiert, wenn ein Element sowohl einen id- als auch einen Klassenselektor hat und dann widersprüchliche CSS-Festlegungen? Dann wird der Selektor mit der höheren Spezifität verwendet und der andere ignoriert.

Exkurs: Klassennamen

Oft gerät man beim Aufbauen eines Stylesheet in die Versuchung, die zu stylenden HTML Elemente mit Klassen zu versehen, die das gewünschte Aussehen dieser Elemente beschreiben, und gibt ihnen Namen wie blauerText oder roterRahmen. Viel besser ist es, seine Seite semantisch zu klassifizieren. Zusammen mit semantischem HTML und strukturellen Pseudoklassen sind Klassennamen oft nicht nötig. Sind Klassen zur Identifikation von bestimmten Seitenbereichen unvermeidbar, so soll die Klasse die Rolle beschreiben, die dieses HTML-Element auf der Seite einnimmt.

Eine Empfehlung des W3C

Gute Namen ändern sich nicht. Denken Sie darüber nach, warum etwas ein bestimmtes Aussehen haben soll und nicht, wie es aussehen soll. Optik ist veränderlich, aber der Grund, warum irgend etwas eine bestimmte Optik haben sollte, bleibt der gleiche.

Gute Namen sind warnung, downloadableImage oder subMenu. Sie beschreiben, was ein bestimmtes Element repräsentiert, und werden sich vermutlich nicht so schnell ändern. Eine Warnung wird immer eine Warnung bleiben, ganz gleich, wie sich das Design der Seite ändert.

Schlechte Namen wären rahmen4px, textHell oder schönerHintergrund. Vielleicht wollen Sie den Rahmen doch auf üppige 5 Pixel aufblasen, oder der Hintergrund sieht irgendwann ganz schön langweilig aus und ist überhaupt nicht mehr schön. Der Vorteil beim Einsatz von CSS besteht darin, dass Sie nicht viel ändern müssen, um das Aussehen Ihrer Webseite zu verändern. Wenn Sie ihre ganzen hellen Text in dunkle Texte ändern müssen, und deswegen auf allen Ihren HTML-Seiten Klassennamen ändern müssen, dann werden Sie vermutlich ein paar übersehen.

Pseudoklassen

Häufig soll aber ein Element der Webseite nicht aufgrund seiner semantischen Bedeutung, sondern aufgrund der Position innerhalb der Webseite besonders formatiert werden. Der umständliche Weg wäre, dem betreffenden Element eine Klasse zu geben und, wenn sich die Position verändert, das HTML-Markup entsprechend anzupassen.

Mit der strukturellen Pseudoklasse :first-child können Sie das erste Element ansprechen.

Siegerliste mit :first-child ansehen …

li {
  width: 10em;
  text-align: center;	
}	
	
li:first-child {
  background-color: gold;
  border: 1px solid;
  border-radius: 5px;
}

Das Beispiel selektiert das erste li-Element und gibt ihm eine goldene Hintergrundfarbe und einen abgerundeten Rahmen.
Falls sich das Markup ändert, bleibt die Formatierung der Siegerliste gleich.

ansehen …

Leider gibt es keinen second-child-Selektor. Sie können aber mit :nth-child()-Selektor beliebige Elemente ansprechen.

Siegerliste mit :nth-child() ansehen …

li:nth-child(2) {
  background-color: lightgrey; /* silver */
  border: 1px solid;
  border-radius: 5px;
} 

li:nth-child(3) {
  background-color: #cd7f32;   /* bronze */
  border: 1px solid;
  border-radius: 5px;
}

Das Beispiel selektiert mit nth-child() das zweite und dritte li-Element und gibt ihm eine silberne, bzw. bronzene Hintergrundfarbe und einen abgerundeten Rahmen.

ansehen …

Der :nth-child()-Selektor kann mit den Werten even und odd (engl. für gerade und ungerade) auch jedes zweite Element ansprechen und so eine Tabelle mit einem Zebra-Look anschaulicher gestalten:

Beispiel ansehen …

      th {
        background-color: #666; 
        color: #fff;
      }

      tr {
        background-color: #fffbf0;
        color: #000;
      }

      tr:nth-child(odd) {
        background-color: #e4ebf2 ;
      }

In diesem Beispiel wird eine Tabelle dargestellt.

Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit

tr:nth-child(odd) {
       background-color: #e4ebf2 ;
}

anders eingefärbt.

ansehen …

Empfehlung: Verwenden Sie Pseudoklassen nur in begründeten Ausnahmefällen.
Wenn Sie neue Abschnitte und Elemente in Ihre Webseite einfügen, verändert sich unter Umständen die Position und Reihenfolge und so können andere als die gewünschten Elemente selektiert werden.

Benutzeraktionen sichtbar machen

dynamische Pseudoklassen

Eine der Besonderheiten von HTML-Seiten gegenüber reinen Text-Dateien ist die Interaktivität. Die ersten zwei Buchstaben von HTML bedeuten ja Hypertext, d.h., dass Text oder Bilder auf andere Seiten verweisen können und ein Klick diese aufruft. Auch bei Formularen können Sie mit der Webseite „kommunizieren“.

Dynamische Pseudoklassen selektieren Elemente aufgrund einer Benutzeraktion. Diese können dann mit CSS formatiert werden.

Die Pseudoklassen :hover, :active und :focus sprechen auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die

• mit dem Mauszeiger berührt werden (:hover; englisch to hover: schweben),
• den Fokus (:focus) erhalten, zum Beispiel durch die Tabulatortaste ↹ oder
• aktuell angeklickt sind (:active).

Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar. Allerdings ist es nicht sinnvoll, Text beim Überfahren mit der Maus anders zu formatieren.

• 
• 
• 
• 
• 
• 

Beispiel ansehen …

a         { padding: .2em; }
a:focus   { background-color: red; color: black;}
a:hover   { background-color: blue; color: white; }
a:active  { background-color: yellow; color: black; }

<ul>
  <li><a href="https://selfhtml.org">selfhtml</a></li>
  <li><a href="https://forum.selfhtml.org">selfhtml Forum</a></li>
  <li><a href="https://wiki.selfhtml.org">selfhtml Wiki</a></li>
</ul>

Link-Elemente, die mit der Tabulatortaste ↹ ausgewählt werden, erhalten einen roten Hintergrund, werden sie mit dem Mauszeiger berührt, wechselt der Hintergrund zu blau, während die Links angeklickt sind, ist ihre Hintergrundfarbe gelb.

ansehen …

Beachten Sie: Um den zumeist erwünschten Effekt zu erhalten, muss die Reihenfolge dieses Beispiels eingehalten werden. Beispielsweise überschriebe gegebenenfalls ein :focus zuvor notierte Eigenschaften für :hover, sodass ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.

Beachten Sie: Auf Mobilgeräten ist wegen der fehlenden Maus die Verwendung der Pseudoklasse :hover problematisch. Beispielsweise kann dies zur Nichtbedienbarkeit einer Navigation führen, falls Unterpunkte per :hover ausgeklappt werden sollen.

Elemente hinzufügen

Pseudoelemente

Mit CSS können Webseiten in ihrem Aussehen verändert werden. Häufig will man neben dem Inhalt noch weitere Gestaltungselemente wie Trennlinien, Dekorationsgrafiken, etc. verwenden. Eine Trennlinie kann als thematischer Bruch mit hr ausgezeichnet, aber auch durch ein border-bottom festgelegt werden.

Bilder, die Teil des Inhalts darstellen, werden im HTML eingebunden. Dekorationsgrafiken sollten aber als Hintergrundbild oder mithilfe von Pseudoelementen, die nicht im Markup erscheinen, eingebunden werden.

Empfehlung: Nach dem Prinzip der Trennung der Zuständigkeiten sollten Sie bei einer Webseite die Trennung von Inhalt und Präsentation einhalten.
Dekorationselemente sollten nicht im Markup, sondern nur im CSS verankert werden.

Die Selektoren

• ::before
• ::after

erzeugen Pseudoelemente. Diese stehen vor bzw. nach dem Element und sind im Seiteninspektor (F12) als Kindelemente sichtbar.

Pseudoelement im Seiteninspektor

Pseudoelemente ansehen …

.hinweis::before { 
  content: 'Warnhinweis: ';
  background-color: red;
  color: white; 
  font-weight: bold;
  padding: 0 1em;
  margin-right: 1em;
}

a::after {
  content: url("https://src.selfhtml.org/dok.gif");
  margin-left: .1em;
}

Elemente mit der Klasse .hinweis erhalten ein ::before-Pseudoelement, das vor dem eigentlichen Element dargestellt wird. Die content-Eigenschaft enthält das Wort Warnhinweis als Inhalt. Dies wird mit rotem Hintergrund und fettem, weißem Text herausgehoben.
Links erhalten ein ::after-Pseudoelement, das nach dem Linkttext angezeigt wird. Der content-Eigenschaft wird als Wert die URL einer Grafik zugewiesen.

ansehen …

In HTML/Tutorials/Links/Gestaltung mit CSS sehen Sie, wie Sie interne und externe Links durch SVG-Grafiken kennzeichnen können.

Pseudoelemente als Aufzählungszeichen

HTML bietet einige Aufzählungszeichen für ungeordnete Listen. Sie können diese auch durch Pseudoelemente ersetzen und vielfältig gestalten:

Pseudoelemente als Aufzählungszeichen ansehen …

a {
  padding: 0 1em;
  position: relative;
}

a::before {
  content: '';
  width: 0;
  height: 0;
  font-size: 0;
  border: 8px solid transparent;
  border-left-color: currentColor;
  position: absolute;
  top: 3px;
  left: 0;
}

a:hover::before {
  background: yellow;
}

li {
  list-style-type: none;
  line-height: 200%;
}

Links erhalten ein ::before-Pseudoelement. Anders als in den oberen Beispielen bleibt der Wert für content leer. Das Pseudoelement wird in Breite, Höhe und Zeilengröße auf 0 gesetzt, erhält aber einen 8px breiten, transparenten Rand. Nur dem linken Rand wird durch border-left-color: currentColor; der Farbwert currentColor, die aktuelle Textfarbe zugewiesen.
Sie können Pseudoelemente mit position: absolute aus dem Elementfluss herausnehmen und beliebig platzieren. Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position: positioniert wurde. Deshalb erhält das a-Element ein position: relative;.

ansehen …

Empfehlung: Verzichten Sie weitgehend auf eine Positionierung mit position: absolute. Werte, die auf Ihrem Desktop gut aussehen, sind auf anderen Viewports eventuell außerhalb des Darstellungsbereichs oder durch andere Elemente überdeckt.

Mehr über Breiten, Innen- und Außenabstände erfahren Sie im nächsten Kapitel!

← Syntax

Einstieg in CSS
(Übersicht)

Box-Modell →

Weblinks

• W3C: Selectors Level 4 Editor’s Draft, 11 October 2017