CSS-Selektoren kombinieren

Abhängig davon, in welchen Übergeordneten Elementen und Containern etwas verschachtelt ist, können wir das Aussehen steuern. Für alle Beispiele nehmen wir folgenden HTML-Code an:

<header>
  <nav class="navi">
    <a href="home.html" class="nav-link">Home</a>
    <a href="services.html" class="nav-link active">Services</a> 
    <div class="subnavi">
      <a href="reparaturen.html" class="nav-link">Reparaturen</a>
    </div>
  </nav>
</header>

<main>
  <h1>Services</h1>
  <p>Dies ist unter Super-Service</p>
  <p>Wir bieden <a href="reparaturen.html">Reparaturen</a> an.</p>
</main>

<footer>
  <nav>
    <a href="kontakt.html">Kontakt</a> | 
    <a href="datenschutz.html">Impressum & Datenschutz</a>
  <nav>
</footer>

🛠️ Ausprobieren

Erstelle eine neue Datei selektoren-test.html und ein neues CSS css/selektoren-test.css und binde das CSS ins HTML-Dokument ein. Kopiere ein HTML-Grundgerüst in deine neue HTML-Datei und dann innerhalb des Body den obigen HTML-Code.

Testen dann im CSS die folgenden Beispiele aus.

Mehrere Elemente auswählen

Teilen sich mehrere Elemente die gleichen Regeln, sollten diese zusammengefasst werden. Dazu werden mehrere Selektoren hintereinander geschrieben, getrennt durch Kommas:

h1, .subnavi, footer {
  font-style: italic;
}

Nachfahren-Selektor

Nachfahren sind alle Elemente innerhalb eines anderen Elements (Kinder, Kindeskinder etc.). Dieser Selektor adressiert also bestimmte Elemente, welche in HTML in einem anderen Element verschachtel sind. Die Eltern- und Nachfohr-Selektoren werden durch ein Leerzeichen getrennt:

Anwendungsbeispiele

Unterschiedliche Formatierung von Elementen je nach Container:

nav a { /* Formatiert alle Links in der Navigation */
  color: red;
}

Unterschiedliches Layout (z.B. CSS-Grid) einer Seiten:

<html>
  <head>...<head>
  <body class="home">
    <div class="container">
      <header>...</header>
      <main>...</main>
      <footer>...</footer>
    </div>
  </body>
</home>

.home .container { /* Eigenes Grid für die Startseite definieren */
  grid-template-columns: ...;
  grid-template-rows:    ...;
  grid-template-areas:   ...;
}

Kind-Selektor (direkte Nachfahren)

Beim Kind-Selektor werden zwei Selektoren durch ein > voneinander getrennt. Der Selektor spricht das zuletzt erwähnte Element nur dann an, wenn es ein direktes Kind des vorhergehenden Elements ist.

Als Kind werden alle Elemente direkt unterhalb eines anderen Elements bezeichnet.

.navi > a {/* Formatiert nur "Home" und "Services", aber nicht "Reparaturen" */
  color: red;
}

Next-Sibling-Kombinator

Wählt ein Element aus, welches unmittelbar auf ein anderes Element auf der gleichen Ebene folgt.

h1 + p { /* Formatiert nur das nav-Element direkt nach h1 */
  font-weight: bold;
}

Mehrfach-Selektoren

Um Elemente auszuwählen, welche mehrere Selektoren gleichzeitig erfüllen, kette die Selektoren einfach aneinander ohne Leerzeichen dazwischen:

/* Gilt nur für Links mit der Klasse "nav-link" */
a.nav-link {
  text-decoration: none;
}
/* Gilt nur für Elemente mit Klassen "subnav-link" UND "active" in einem Element */
.nav-link.active {
  color: red;
}

Beispiel: Anwendung für verschiedene Seiten-Layouts

🛠️ Aufgabe

Auf deiner Seite "Über mich":

Gebe allen Links in der Tabelle eine andere Farbe (Nachfahren-Selektor)
Gebe allen Links im Footer eine andere Farbe
Schau, wo du aktuell doppelte Style-Definitionen hast und fasse sie zusammen (Mehrere Elemente auswählen)
Was bewirkt folgende Definition? h2 + p { font-weight: bold; }

PreviousCSS-Variablen NextKaskadierung - Wer gewinnt?

Last updated 19 days ago

Was this helpful?