CSS .classSelektoren

Vollständiges CSS-Selektor-Referenzhandbuch

Beispiel

Alle Elemente mit class="intro" auswählen und festlegen:

.intro { background-color:yellow; }

Selbst ausprobieren »

Definition und Verwendung

.classDer Selektor wird verwendet, um HTML-Elemente mit einem angegebenen class-Attribut auszuwählen.

Durch die Verwendung von.classin CSS-Regeln können Sie Stile auf mehrere Elemente mit derselben Klasse anwenden.

Hinweis:Kategorienamen beginnen mit.Beginnt mit, und können für mehrere Elemente in einem HTML-Dokument verwendet werden.

HTML-Code:

<p class="highlight">Dies ist ein Absatz mit der Klasse "highlight".</p> <p>Dies ist ein gewöhnlicher Absatz.</p> <p class="highlight">Dies ist ein weiterer Absatz mit der Klasse 'highlight'.</p>

CSS-Code

.highlight {
  color: red;
  font-weight: bold;
}

Selbst ausprobieren »

Im obigen Code wird die Klasse.highlightauf zwei<p>Elemente angewendet. Durch die Verwendung von.highlight-Selektor, der alle Elemente mit dieser Klasse auswählt und Stile auf sie anwendet.

Der CSS-Code im obigen Beispiel wird verwendet, um die Textfarbe auf red zu setzen und den Text fett anzuzeigen; der Effekt ist wie folgt:

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle wichtigen Browser unterstützen es.class-Selektoren

Examples

Weitere Beispiele


Beispiel

Wählen Sie alle <p>-Elemente mit class="hometown" aus und setzen Sie die Hintergrundfarbe auf yellow:

p.hometown { background-color:yellow; }

Selbst ausprobieren »

Vollständiges CSS-Selektor-Referenzhandbuchandere Erweiterungen