Selektor (CSS)

Ein CSS-Selektor ist der Teil einer CSS-Regel, der beschreibt, auf welche Elemente in einem Dokument die Regel angewendet wird. Die übereinstimmenden Elemente erhalten den in der Regel angegebenen Stil.

Beispiel

Betrachten Sie dieses CSS:

css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

Die Selektoren hier sind "p" (der den Text innerhalb eines <p>-Elements grün einfärbt), "div.warning" (das jedem <div>-Element mit der class "warning" das Aussehen einer Warnbox verleiht) und "#customized", das die Grundschriftart des Elements mit der ID "customized" auf 16 Pixel hohe Lucida Grande oder eine der wenigen Alternativschriftarten festlegt.

Wir können dieses CSS dann auf einige HTML-Elemente anwenden, wie zum Beispiel:

html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

Der resultierende Seiteninhalt wird folgendermaßen gestaltet:

Siehe auch