CSS-Selektoren, CSS-Operatoren und Dominanzregeln

Eine ausführliche Erklärung der CSS-Selektoren, der CSS-Operatoren und der Dominanzregeln: Welche CSS-Befehle setzen sich durch, und warum?Tags: | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

In diesem Tutorial lernen wir die Grundlagen der CSS-Selektoren kennen. Diese helfen dir, deine Website mit möglichst wenig Aufwand grafisch zu gestalten. Anstatt also über das style-Attribut jedes HTML-Element einzeln in seinen Farben und Formen zu bestimmen, können wir mit CSS-Selektoren mehrere HTML-Elemente auf einmal ansprechen, und das auch über mehrere Unterseiten hinweg.

1. Wo wir CSS-Selektoren einsetzen können

Du kannst deine CSS-Selektoren entweder innerhalb eines <style>-Tags im <head>-Bereich einer HTML-Seite oder direkt in eine eigene .css-Datei schreiben, die du dann in deine HTML-Seite einbindest.

Eine genaue Erklärung, wie das geht, findest du im Tutorial über erste CSS-Grundlagen.

2. Die 3 Arten von CSS-Selektoren

CSS-Selektoren lassen sich grundsätzlich in 3 Unterarten einteilen:

  • ein HTML-Tag
  • eine Klasse
  • eine ID

2.1 Ein CSS-Selektor über ein HTML-Tag

Wenn in einer Website z.B. alle <h1>-Überschriften orange werden sollen, kannst du das in CSS über einen Selektor lösen, der sich auf ein HTML-Tag bezieht, z.B. so:

h1 {
    color: orange;
}

Alle <h1>-Tags in dem betroffenen HTML-Dokument werden dadurch orange eingefärbt.

Willst du, dass alle Links einer HTML-Seite grün eingefärbt werden, funktioniert das Prinzip genau gleich:

a {
    color: green;
}

Du schreibst also nur den Namen eines Tags (das, was normalerweise in den <>-Klammern steht) ohne die Klammern, dann eine geschwungene Klammer {} und darin deine CSS-Befehle, die du auf alle solche HTML-Tags anwenden willst.

Möchtest du, dass mehrere CSS-Befehle auf das HTML-Tag angewendet werden, schreibst du einfach mehrere in die geschwungenen Klammern, z.B. so:

a {
    color: green;
    text-decoration: none;
}

Der CSS-Befehl text-decoration: none; entfernt übrigens die Unterstreichung, die der Browser bei Links standardmäßig hinzufügt.

Aber was, wenn wir z.B. nur bestimmte Links einfärben wollen und andere nicht?

Das führt uns zu den CSS-Klassen:

2.2 Mit Klassen als CSS-Selektoren nur bestimmte HTML-Elemente auswählen

Jedes HTML-Element kann ein zusätzliches class-Attribut erhalten. In dieses Attribut kann man eine oder mehrere frei gewählte Klassen-Namen einsetzen, die jeweils durch ein Leerzeichen getrennt sind.

Im folgenden Beispiel haben wir drei Links, wobei einer keine Klasse hat, einer hat zwei Klassen, und einer hat nur eine Klasse:

<a href="http://relativemeister.com">Main</a>
<a href="https://bunterrichten.com" class="extern camp">Zu bunterrichten</a>
<a href="https://camp.bunterrichten.com" class="extern">Zum Camp auf bunterrichten</a>

Würden wir jetzt als CSS-Selektor einfach nur „a“ verwenden, so würden die CSS-Befehle in den geschwungenen Klammern {} alle <a>-Tags, also alle Links betreffen.

Über das class-Attribut können wir jetzt allerdings festlegen, welche der Links verändert werden sollen.

Zum Beispiel könnten wir sagen, dass Links mit der Klasse „extern“ zusätzlich eine gelbe Hintergrund-Farbe bekommen sollen. Dazu schreiben wir jetzt statt dem Namen des HTML-Tags stattdessen den Namen der Klasse, mit einem Punkt davor. Also in etwa so:

.extern {
    background-color: yellow;
}

Nun haben von unseren drei Links der 2. und der 3. Link einen gelben Hintergrund, weil beide in ihrem class-Attribut die Klasse „extern“ stehen haben.

Was aber, wenn wir nur genau ein HTML-Element ansprechen wollen?

Um diese Frage zu beantworten, kommen wir als nächstes zu den IDs.

2.3 IDs als CSS-Selektoren verwenden, um genau ein HTML-Element auszuwählen

Genauso wie jedes HTML-Element ein class-Attribut haben kann, kann es zusätzlich auch ein id-Attribut haben. Für das id-Attribut gibt es einige Dinge zu beachten:

  • Eine ID darf nur 1x pro Unterseite vorkommen.
    Es darf also nicht 2 oder mehr HTML-Elemente mit der gleichen ID auf einer Seite geben.
  • Jedes HTML-Element hat nur genau 1 ID.
    Man kann also nicht wie beim class-Attribut mehrere IDs mit Leerzeichen getrennt nebeneinander schreiben.

Nehmen wir unsere drei Links von weiter oben nochmal als Beispiel her, und geben wir dem 2. Link (der zum Camp führt) eine ID dazu:

<a href="http://relativemeister.com">Main</a>
<a href="https://bunterrichten.com" class="extern camp" id="camp">Zu bunterrichten</a>
<a href="https://camp.bunterrichten.com" class="extern">Zum Camp auf bunterrichten</a>

Wenn wir dieses HTML-Element nun mit einem CSS-Selektor auswählen wollen, funktioniert das genau wie mit einer CSS-Klasse, nur schreiben wir statt dem Punkt eine Raute # vor den Namen der ID:

#camp {
    color: red;
}

Nun wird das HTML-Element mit der ID „camp“ eine rote Schriftfarbe erhalten.

Aber was, wenn wir z.B. nur ul-Listen, die sich innerhalb einer anderen ul-Liste befinden, als CSS-Selektor auswählen wollen?

Das bringt uns zu den Verkettungs-Möglichkeiten von CSS-Selektoren.

3. CSS-Selektoren verketten und kombinieren

Bisher haben wir einfache CSS-Selektoren über HTML-Tags, Klassen und IDs kennengelernt.

Nun sehen wir uns die Möglichkeiten an, CSS-Selektoren zu kombinieren, um eine noch genauere Auswahl zu treffen:

  • Eltern-Kind-Beziehungen zwischen HTML-Elementen
  • HTML-Elemente mit Attributen
  • HTML-Tags, Klassen und IDs verbinden
  • Die CSS-Operatoren *, >, +, ~ und Beistrich (,)
  • Zustände von HTML-Elementen wie :hover

3.1 Eltern-Kind-Beziehungen zwischen HTML-Elementen auswählen

Einer der häufigsten Kombinationsmöglichkeiten von CSS-Selektoren sind Eltern-Kind-Beziehungen.

Ein klassisches Beispiel wäre z.B. die verschachtelte Liste. Wollen wir alle ul-Listen in einer HTML-Seite verändern, reicht ein ul {}:

ul {
    color: green;
}

Wollen wir hingegen nur die Unter-Listen bearbeiten, schreiben wir die HTML-Elemente, die uns bis zur Unterliste führen, jeweils mit Leerzeichen nebeneinander:

ul li ul {
    color: blue;
}

Was der Browser bei so einer Anweisung macht, ist folgendes:

  1. Suche in der HTML-Seite, ob du ein <ul>-Tag findest.
  2. Falls ja, versuche, innerhalb des <ul>-Tags ein <li>-Tag zu finden.
  3. Falls du eines gefunden hast, versuche, innerhalb dessen nochmal ein <ul>-Tag zu finden.
  4. Wenn du auch dieses findest, wende die CSS-Befehle innerhalb der {}-Klammern auf dieses an.
  5. Beginne wieder bei 1., bis du nichts mehr findest.

Das gleiche Prinzip lässt sich auch mit Klassen und IDs anwenden, z.B. so:

.main-menu li ul {
    color: blue;
}

3.2 Nur HTML-Elemente mit bestimmten Attributen auswählen

Wenn wir z.B. ein <input>-Tag mit einem Rahmen versehen wollen, können wir das:

input {
    border: 3px solid orange;
}

Allerdings betrifft das alle <input>-Elemente, egal ob es sich jetzt um ein Textfeld oder einen Submit-Button handelt.

Was, wenn wir nur das Email-Feld auswählen wollen?

Wir könnten mit dem class-Attribut oder dem id-Attribut arbeiten. Allerdings hat dies den Nachteil, dass unser HTML-Code dadurch etwas länger wird, und die Seite so langsamer übertragen wird.

Eine Alternative ist ein CSS-Selektor, der auf Attributen basiert, z.B. so:

input[type="email"] {
    border: 3px solid orange;
}

3.3 HTML-Tags, Klassen und IDs in einem CSS-Selektor verbinden

Was, wenn wir z.B. nur HTML-Elemente auswählen wollen, die eine bestimmte Klasse UND eine bestimmte ID haben?

Auch das geht, nämlich z.B. so:

a.camp#camp {
    color: purple;
}

Dieser CSS-Selektor wählt nur dann einen Link aus, wenn er auch die Klasse „camp“ besitzt und zusätzlich auch noch die ID „camp“.

Damit das funktioniert, darf zwischen den einzelnen Bezeichnern kein Leerzeichen sein.

3.4 CSS-Selektoren über Zustände wie :hover

Eine weitere Möglichkeit, CSS-Selektoren noch genauer auswählen zu lassen, sind Zustände von HTML-Elementen, wie z.B. :hover, das besagt, dass der Benutzer mit der Maus über diesem Element ist.

Das folgende <div>-Tag ändert z.B. seine Farbe, wenn der Benutzer mit der Maus darüber fährt:

div {
    background-color: #eee;
}
div:hover {
    background-color: orange;
}

Da es unzählige solche Zustände gibt, ist hier nicht der Platz, sie alle aufzuzählen und zu erklären.

Fürs erste muss reichen, dass es sie gibt, und dass du sie als CSS-Selektoren einsetzen kannst.

3.5 Die CSS-Operatoren *, >, +, ~ und Beistrich (,)

Diese CSS-Operatoren ermöglichen dir später noch einige interessante Tricks, daher solltest du sie zumindest mal gesehen haben.

Hier eine kurze Erklärung, was diese ungefähr machen:

3.5.1 Der CSS-Operator Stern *

Der CSS-Operator * steht für „alle HTML-Elemente“. Du kannst ihn z.B. einsetzen, um alle Kind-Elemente eines Eltern-HTML-Elements auszuwählen, egal welche Art von HTML-Tags diese Kind-Elemente haben:

table tr * {
    border: 3px solid black;
}

Der CSS-Operator * wählt alle HTML-Elemente aus, die in einem <tr>-Tag innerhalb einer Tabelle vorkommen, egal ob das nun <th>-Tags oder <td>-Tags (oder sonstige) sind.

Das kann manchmal Schreibarbeit ersparen – und dazu beitragen, dass deine Website schneller übertragen wird.

3.5.2 Der CSS-Operator Pfeil >

Der CSS-Operator > wählt nur die Kind-Elemente aus, die direkte Nachkommen sind.

Um dir vorzustellen, was das bedeutet, sieh dir mal diese verschachtelte ungeordnete Liste an:

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Was würde passieren, wenn wir den folgenden Selektor anwenden?

.main-menu li ul {
    border: 3px solid blue;
}

Alle Kind-Elemente von der Unterliste ul erhalten einen blauen Rahmen. Also auch die Unterliste der Unterliste.

Wenn wir jetzt aber den CSS-Operator > einsetzen, so werden nur die Kind-Elemente eingefärbt, die direkte Nachkommen sind:

.main-menu > li > ul {
    border: 3px solid blue;
}

3.5.3 Der CSS-Operator Plus +

Der +-Operator in CSS-Selektoren sucht nach dem nächsten HTML-Element auf der gleichen Ebene, und wählt dieses aus.

Kommen wir für dieses Beispiel wieder zu unseren 3 Links von vorhin zurück:

<a href="http://relativemeister.com" id="main">Main</a>
<a href="https://bunterrichten.com" class="extern camp" id="camp">Zu bunterrichten</a>
<a href="https://camp.bunterrichten.com" class="extern">Zum Camp auf bunterrichten</a>

Der Einfachheit halber bekommt der 1. Link auch eine ID, nämlich „main“.

Wenn wir jetzt basierend auf dem 1. Link (ID ist „main“) das jeweils nächste Geschwister-Element auswählen wollen, so verwenden wir dazu den +-Operator:

#main + .extern {
    background-color: black;
}

In diesem Fall wird nicht der 1. Link mit der ID „main“ ausgewählt, sondern das erste Geschwister-Element mit der Klasse „extern“ – also der zweite Link.

Achtung: Dies funktioniert (wie beim Tilde-Operator) nur dann, wenn das HTML-Element, von dem wir ausgehen (in unserem Fall #main) im HTML-Code vor den Geschwistern steht!

3.5.4 Der CSS-Operator Tilde ~

Der Tilde-Operator ~ funktioniert in CSS fast genau gleich wie der Plus-Operator. Auch er wählt Geschwister-Elemente aus.

Allerdings nicht nur eines, sondern alle, die der Browser finden kann.

Im CSS-Code sieht das Ganze dann so aus:

#main ~ .extern { background-color: black; }

Da in unserer Link-Liste 2 Links die Klasse „extern“ besitzen und auch beide

  • nach dem HTML-Element mit der ID „main“ kommen und
  • auf der gleichen Ebene zu finden („Geschwister“) sind

werden beide eine schwarze Hintergrundfarbe bekommen.

3.5.5 Der CSS-Operator Beistrich ,

Was, wenn wir einige CSS-Befehle auf mehrere Selektoren anwenden wollen?

Dafür gibt es den sehr, sehr praktischen Beistrich-Operator:

#header,
#footer {
    background-color: #ddd;
}

Man kann mit Hilfe des Beistrich-Operators in CSS mehrere Selektoren zusammenfügen, und für alle ausgewählten HTML-Elemente die jeweiligen CSS-Befehle anwenden lassen.

So, nun aber zu einem enorm wichtigen Thema, das wir bisher noch völlig außer Acht gelassen haben: Dominanz-Regeln von CSS-Selektoren. Oder anders ausgedrückt: Wer setzt sich im Konfliktfall durch?

4. Dominanzregeln für CSS-Selektoren: Wer setzt sich durch?

Nun kommen wir zu dem Thema im CSS-Bereich, der oft für die meiste Verwirrung sorgt:

Woher weiß der Browser jetzt eigentlich, welche CSS-Befehle er auf welches HTML-Element anwenden soll, wenn er Anweisungen für HTML-Tags, Klassen und IDs hat, die sich teilweise sogar widersprechen?

Die Antwort auf diese Frage ist etwas kompliziert. Aber wir werden uns ihr Schritt für Schritt annähern.

Bereit?

Dann fangen wir mit den einfachsten Grundlagen an:

4.1 Regel 1: Konflikte gelten nur für bestimmte CSS-Befehle, nicht für alles innerhalb der {}-Klammern

Im folgenden Code gibt es einen Konflikt zwischen CSS-Befehlen:

div {
    font-size: 15px;
    background-color: #eee;
}
div:hover {
    background-color: orange;
    color: red;
}

Die Hintergrund-Farbe der DIVs wird in beiden Selektoren angegeben, daher gibt es einen Konflikt. Nun brauchen wir die Dominanzregeln für CSS-Selektoren.

In diesem speziellen Fall wird der Browser folgendes machen:

  • DIVs bleiben grundsätzlich auf der Farbe #eee
  • Sollte der Benutzer mit der Maus über ein DIV fahren, so wird dieses eine DIV orange.
    Verlässt die Maus das DIV wieder, wird es wieder die Farbe #eee bekommen.

Was für unsere Regel 1 aber am wichtigsten ist: Die CSS-Befehle für font-size (Schriftgröße) und color (Schriftfarbe) werden von dem Konflikt über background-color (Hintergrundfarbe) überhaupt nicht beeinflusst.

Konflikte werden in CSS also nur auf CSS-Befehl-Ebene „ausgetragen“, nicht auf CSS-Selektoren-Ebene.

Das ist die erste Regel.

4.2 Regel 2: ID vor Klasse vor Tag

Nehmen wir nochmal unsere Liste an 3 Links von vorhin als Beispiel,  und schreiben folgenden CSS-Code in unsere .css-Datei:

a {
    color: green;
}
#camp {
    color: red;
}

Alle 3 Links sind Links und werden grün eingefärbt. Aber der eine Link, der zusätzlich das id-Attribut „camp“ hat, wird stattdessen rot eingefärbt.

IDs setzen sich durch gegen Klassen, und Klassen gegen IDs.

4.3 Regel 3: !important ist ein mieser Verlierer, und das style-Attribut direkt im HTML auch

4.3.1 Das style-Attribut direkt im HTML-Code (inline) und Dominanz

Wenn einem HTML-Element direkt im HTML-Code über das style-Attribut CSS-Befehle zugewiesen werden, setzt es sich auch gegen IDs durch:

<a href="https://bunterrichten.com" class="extern camp" id="camp" style="color: blue;">Zu bunterrichten</a>

Meist ist es nicht ratsam, CSS-Befehle so zuzuweisen. Einfach, weil dadurch die mächtige Möglichkeit, CSS-Befehle über CSS-Selektoren zentral zu steuern, sehr eingeschränkt wird.

4.3.2 Warum !important ein mieser Verlierer ist – und alle zum Verlierer macht

Es gibt eine Möglichkeit, alle anderen Dominanzregeln zu umgehen. Diese sieht in etwa so aus:

a {
    color: green !important;
}

Das !important überschreibt (was Dominanz in CSS betrifft) so ziemlich alles, und kann nach jedem CSS-Befehl vor dem Strichpunkt eingefügt werden.

Aber es hat einen großen Nachteil: Man kann es relativ schwierig noch übertrumpfen.

Wenn man nun z.B. alle Links grün haben will, aber manche nicht, helfen die normalen Tricks über IDs usw. nicht, weil !important ein schlechter Verlierer ist und sich einfach trotzdem durchsetzen will.

Besonders nervig ist so etwas, wenn man z.B. auf dem Werk eines anderen Programmierers aufbauen will, der aber überall seine !important reingebaut hat, die man nur mit Schwierigkeiten „übertrumpfen“ kann.

In den meisten Fällen ist !important eher ein Zeichen, dass ein Programmierer/eine Programmiererin die CSS-Dominanzregeln noch nicht genug verstanden hat (oder zu faul war, sie richtig anzuwenden), um auch ohne !important auszukommen.

Du solltest daher wissen, dass !important existiert. Aber es so wenig wie möglich anwenden müssen.

4.4 Regel 4: Je genauerer, desto dominanter

Sieh dir folgenden Code an:

ul {
    background-color: red;
}
ul li ul {
    background-color: orange;
}

Damit werden grundsätzlich alle ungeordneten Listen rot eingefärbt, außer jene, die in einer anderen Liste sind.

Der zweite CSS-Selektor ist genauer definiert als der erste, deswegen setzt er sich dort, wo ein Konfliktfall ist, auch durch.

So, das wars fürs erste mit den Grundlagen der CSS-Selektoren.

Natürlich gibt es da noch viel mehr zu entdecken.

Aber das findest du dann in den weiteren Tutorials 🙂

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.