CSS-Selektoren

CSS-Selektoren sind ein grundlegendes Konzept in CSS, mit dem der Webentwickler festlegt, auf welche HTML-Elemente die Stile angewendet werden sollen. Sie helfen dem Webentwickler, gezielt bestimmte Elemente auszuwählen und ihnen Eigenschaften wie Farbe, Größe oder Position zuzuweisen.

Einfache Selektoren

Diese wählen Elemente basierend auf ihrem Tag-Namen, ihrer Klasse oder ihrer ID aus.

Element-Selektor (Typ-Selektor)

Wählt alle Elemente mit einem bestimmten HTML-Tag aus.
Beispiel: Alle <p>-Elemente werden rot gefärbt.

p {
  color: red;
}

p {
  color: red;
}

Klassen-Selektor (.class)

Wählt Elemente mit einer bestimmten Klasse aus. Klassen können mehrmals verwendet werden.
Beispiel: Alle Elemente mit class=“highlight“ bekommen einen gelben Hintergrund.

.highlight {
  background-color: yellow;
}

.highlight {
  background-color: yellow;
}

<div class="highlight">Dies ist hervorgehoben.</div>
<p class="highlight">Dies auch!</p>

<div class="highlight">Dies ist hervorgehoben.</div>
<p class="highlight">Dies auch!</p>

ID-Selektor (#id)

Wählt ein einzelnes Element mit einer eindeutigen ID aus.
Beispiel: Das Element mit id=“header“ wird blau.

#header {
  color: blue;
}

#header {
  color: blue;
}

<h1 id="header">Meine Überschrift</h1>

<h1 id="header">Meine Überschrift</h1>

Kombinierte Selektoren

Hier werden mehrere Selektoren kombiniert, um spezifischere Auswahlen zu treffen.

Nachfahren-Selektor (Leerzeichen)

Wählt ein Element, das irgendwo innerhalb eines anderen Elements liegt.
Beispiel: Alle <span>-Elemente innerhalb eines <div> werden fett.

div span {
  font-weight: bold;
}

div span {
  font-weight: bold;
}

<div>
  <p>Dies ist ein <span>wichtiger</span> Text.</p>
</div>

<div>
  <p>Dies ist ein <span>wichtiger</span> Text.</p>
</div>

Kind-Selektor (>)

Wählt nur direkte Kinder eines Elements aus.
Beispiel: Nur <li>, die direkte Kinder von <ul> sind, werden unterstrichen.

ul > li {
  text-decoration: underline;
}

ul > li {
  text-decoration: underline;
}

<ul>
  <li>Unterstrichen</li> <!-- Wird ausgewählt -->
  <li>
    <ol>
      <li>Nicht unterstrichen</li> <!-- Wird NICHT ausgewählt -->
    </ol>
  </li>
</ul>

<ul>
  <li>Unterstrichen</li> <!-- Wird ausgewählt -->
  <li>
    <ol>
      <li>Nicht unterstrichen</li> <!-- Wird NICHT ausgewählt -->
    </ol>
  </li>
</ul>

Geschwister-Selektor (+ oder ~)

• + wählt das direkt folgende Geschwisterelement aus.
• ~ wählt alle folgenden Geschwisterelemente aus.

h2 + p {
  color: green; /* Nur der <p> direkt nach <h2> */
}

h2 + p {
  color: green; /* Nur der <p> direkt nach <h2> */
}

<h2>Überschrift</h2>
<p>Grüner Text</p> <!-- Wird ausgewählt -->
<p>Normaler Text</p>

<h2>Überschrift</h2>
<p>Grüner Text</p> <!-- Wird ausgewählt -->
<p>Normaler Text</p>

Beispiel (allgemeiner Geschwister-Selektor):

a[target="_blank"] {
  color: purple; /* Links mit target="_blank" */
}

input[type="text"] {
  border: 1px solid gray; /* Text-Input-Felder */
}

a[target="_blank"] {
  color: purple; /* Links mit target="_blank" */
}

input[type="text"] {
  border: 1px solid gray; /* Text-Input-Felder */
}

Pseudoklassen & Pseudoelemente

• Pseudoklassen (:) wählen Elemente in einem bestimmten Zustand aus.
• Pseudoelemente (::) stylen bestimmte Teile eines Elements.

Beispiele:

/* Pseudoklasse :hover */
button:hover {
  background-color: orange;
}

/* Pseudoelement ::first-letter */
p::first-letter {
  font-size: 2em;
}

/* Pseudoklasse :hover */
button:hover {
  background-color: orange;
}

/* Pseudoelement ::first-letter */
p::first-letter {
  font-size: 2em;
}

Universalselektor (*)

Wählt alle Elemente aus. Beispiel:

* {
  margin: 0; /* Setzt den Abstand aller Elemente auf 0 */
}

* {
  margin: 0; /* Setzt den Abstand aller Elemente auf 0 */
}

Praktisches Beispiel kombiniert

/* Alle <h2> in einem <article> mit Klasse "post" */
article.post h2 {
  color: darkblue;
}

/* Buttons mit Klasse "btn" und hover-Effekt */
.btn {
  padding: 10px;
  background: lightgray;
}
.btn:hover {
  background: gray;
}

/* Alle <h2> in einem <article> mit Klasse "post" */
article.post h2 {
  color: darkblue;
}

/* Buttons mit Klasse "btn" und hover-Effekt */
.btn {
  padding: 10px;
  background: lightgray;
}
.btn:hover {
  background: gray;
}

<article class="post">
  <h2>Blog-Titel</h2> <!-- Wird dunkelblau -->
  <button class="btn">Klick mich</button> <!-- Hover-Effekt -->
</article>

<article class="post">
  <h2>Blog-Titel</h2> <!-- Wird dunkelblau -->
  <button class="btn">Klick mich</button> <!-- Hover-Effekt -->
</article>

Wichtig: Spezifität (Specificity)

Wenn mehrere Regeln auf ein Element zutreffen, entscheidet die Spezifität, welche Regel angewendet wird. Die Rangfolge ist:
• !important (sparsam verwenden!)
• Inline-Styles (style=“…“)
• IDs (#id)
• Klassen (.class), Pseudoklassen (:hover)
• Element-Selektoren (p, div)