CSS Selektoren kombinieren

1. Liste von Selektoren: selector1, selector2

• mit Komma separierte Aufzählung von Selektoren
• nachfolgender Anweisungsblock auf alle angewendet

❮❯HTML<p>Test</p>
<p class="hi">Hallo</p>
<p class="hi">Hi</p>
<a href="https://www.hs-furtwangen.de"> HFU Link</a>

❮❯CSSa,
.hi {
  background: lightgreen;
  color: white;
}

2. Verbundene Selektoren: selector1selector2

• ohne Leerzeichen hintereinander geschriebene Selektoren
• selektiert Elemente, die alle verbundenen Selektoren erfüllen
• Typselektor immer vorne (oder ohne)

❮❯HTML<p>Test</p>
<p class="hi">Hallo</p>
<a class="hi" href="https://www.hs-furtwangen.de"> HFU Link</a>

❮❯CSSp.hi {
  background: lightgreen;
  color: white;
}

3. Mit Kombinatoren verbundene Selektoren: selector1 selector2

• mit (Leer-)Zeichen verbundene Selektoren
• selektiert selector2 Elemente, welche in passender Beziehung zu selector1 stehen
• bei Leerzeichen muss das selector2 Element ein selector1 Element als Vorfahre im Baum haben
• weitere Kombinatoren

❮❯HTML<p>Test</p>
<a href="https://www.hs-furtwangen.de"> HFU Link</a>
<p><a href="https://www.hs-furtwangen.de"> HFU Link</a></p>

❮❯CSSp a {
  background: lightgreen;
  color: white;
}

Spiel zum Lernen