In unserem vorherigen Kapitel haben wir etwas über Selektoren gelernt. Jetzt werden wir über die Selektoren id und class, die häufig verwendet werden, um Webseitenelemente zu gestalten, sprechen.

CSS-Selektor id

Der ID-Selektor ist eine eindeutige Kennung des HTML-Elements, auf das ein bestimmter Stil angewendet werden soll. Es wird verwendet, wenn nur ein einziges HTML-Element auf der Webseite einen bestimmten Stil haben soll.

Sowohl in internen als auch in externen Style Sheets verwenden wir Hash (#) ür den ID-Selektor.

Lassen Sie uns ein Beispiel ansehen.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>Erster Absatz.</p>
    <p id="blue">Zweiter Absatz.</p>
    <p>Dritter Absatz.</p>
  </body>
</html>

Wie Sie sehen, haben wir blue als ID-Selektor für den zweiten Absatz (id="blue") zugewiesen und seinen Stil mit der Farbeigenschaft - #blue {color: #1c87c9;} im Abschnitt <head> angegeben. Das bedeutet, dass das HTML-Element mit dem id-Selektor blau in #1c87c9 angezeigt wird.

Überprüfen Sie diesen Code in unserem HTML-Online-Editor, um zu sehen, dass die Farbe des zweiten Absatzes #1c87c9 ist.

CSS-Selektor class

Class-Selektor wird verwendet, wenn der gleiche Stil auf mehrere HTML-Elemente auf derselben Webseite angewendet werden soll.

Sowohl in internen als auch in externen Style Sheets verwenden wir Punkt (.) für die Klassenauswahl.

Lassen Sie uns ein Beispiel ansehen.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 class="blue">Das ist eine Überschrift.</h2>
    <p>Zweiter Absatz.</p>
    <p class="blue">Dritter Absatz.</p>
  </body>
</html>

In unserem Beispiel wird der Selektor class zweimal verwendet, in der Überschrift und im Absatz.

Wie Sie sehen, haben wir blue als class Selektor (class="blue") zugewiesen, und seinen Stil mit der Farbeigenschaft - .blue {color: #1c87c9;} im Abschnitt <head> angegeben. Das bedeutet, dass die Elemente mit dem Klassenwahlschalter blau in #1c87c9 angezeigt werden.

In unserem Beispiel sind der Titel und der dritte Absatz #1c87c9. Überprüfen Sie es in unserem HTML-Online-Editor.

Übe dein Wissen

Welche Aussage über CSS-ID und-Klasse ist korrekt?
Finden Sie das nützlich?