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 die Farbe Grün auf den Text innerhalb eines <p>-Elements anwendet), "div.warning" (das jedes <div>-Element mit der class "warning" wie eine Warnbox aussehen lässt) und "#customized", das die Grundschriftart des Elements mit der ID "customized" auf 16 Pixel hohe Lucida Grande oder eine der wenigen Ersatzschriftarten setzt.

Wir können dieses CSS dann auf etwas HTML 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 ist wie folgt gestaltet:

Siehe auch