Selector (CSS)

Ein CSS-Selector ist der Teil einer CSS-Regel, der beschreibt, welche Elemente in einem Dokument die Regel anwenden sollen. Die passenden Elemente erhalten den in der Regel spezifizierten 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" (welcher die Farbe Grün auf den Text innerhalb eines <p>-Elements anwendet), "div.warning" (welches jedes <div>-Element mit der Klasse "warning" wie eine Warnbox aussehen lässt) und "#customized", welches die Grundschriftart des Elements mit der ID "customized" auf 16 Pixel große Lucida Grande oder eine der wenigen Ersatzschriftarten setzt.

Wir können dann dieses CSS auf etwas HTML anwenden, wie z.B.:

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 so gestaltet:

Siehe auch