CSS-Selektoren

CSS Selektoren für HTML-Elemente

Eine CSS Regel besteht aus zwei Teilen – dem CSS-Selektor und der Deklaration in geschweiften Klammern, { und }.

Einfach ausgedrückt ist ein CSS-Selektor die Zuordnung zu einem HTML-Element auf der Webpage (Webseite). Die Regeln, die einem Selektor zugeordnet werden, werden auf die Elemente der Webseite angewendet,

In der Deklaration werden die Eigenschaften und Werte angegeben.

CSS Selektoren können gruppiert werden. Hierzu wird als Trennzeichen das Komma verwendet. Die durch Kommas getrennte Liste von CSS Selektoren entspricht dabei einer logischen ODER Verknüpfung.

Die einfachsten CSS Selektoren sind Typ bzw. Element Selektoren, z.B. P oder H1. Diese Element Selektoren suchen nach allen HTML-Elementen eines Typs und verbinden das HTML-Element mit dem CSS-Style.

Beispiel

Gruppierte Selektoren

h1, h2, h3 {
/* Schriftgröße für Überschriften */
font-size: 1.3em;

/* Schriftfarbe mediumRed */
color: #bb0000;
...
}

Einfach-Selektoren

Bei den einfachen CSS-Selektoren ist man nicht darauf beschränkt, nur HTML-Tags zu selektieren. Es gibt verschiedene Arten von Selektoren. Diese Selektoren lassen sich auch kombinieren. Die Einfach-Selektoren werden in folgende Gruppen unterteilt:

1. Der Element-Selektor bzw. Typ-Selektor

Der einfachste Selektor ist der sogenannte Typ-Selektor. Mit einem Typ-Selektor kann man einem HTML-Tag bestimmte Stile zuweisen. Die Definitionen zur Formatierung des HTML Elements werden im Deklarations-Teil der CSS-Regel angegeben. Die auf diese Weise definierten Stile gelten für alle Vorkommen dieses HTML-Tags, z.B. H1 (Überschrift erster Ordnung) oder P (Absatz).

Beispiel CSS

Element-Selektor

h1 {
/* Schriftgröße für alle H1 Überschriften */
font-size: 1.3em;

/* Schriftfarbe mediumRed */
color: #bb0000;
...
}

2. Der Klassen-Selektor bzw: class-Selektor

Mit der Variante Typselektor ist es nicht möglich, ein einzelnes Element oder bestimmte Elemente zu selektieren. Damit eine CSS-Regel nicht immer alle Elemente der Webseite selektiert, kann man für das Element eine eigene Klasse English: class definieren. Der class-Selektor spricht die Elemente an, für die im HTML-Code das entsprechende class-Attribut im einleitenden HTML-Tag (z.B. <p class="bigger">) angegeben wird.

Beachte:

  1. In der Style-Definition ist der Klassen-Selektor bzw. class-Selektor der Klassenname mit vorangestelltem Punkt.

  2. Der Klassenname ist Case-sensitiv, d.h. Groß- und Kleinschreibung muss beachtet werden.

  3. Der klassenname darf nicht mit einem Bindestrich oder einer Ziffer beginnen.

  4. Man kann einem HTML-Element mehrere Klassen zuweisen. Die Namen der Klassen im class-Attribute werden durch Leerzeichen voneinander getrennt angegeben.

  5. Eine definierte Klasse darf im HTML-Code beliebig oft verwendet werden.

Beispiel CSS

CSS Klasse definieren

p {
/* Standard-Schriftgröße */
font-size: 1em;
}

.bigger {
/* Schrift 25% größer als Standard */
font-size: 1.25em;
}Beispiel HTML<p>
Dieser Absatz hat die Standard-Schriftgröße.
</p>
<p class="bigger">
Für diesen Absatz wird die Schrift vergrößert.
</p>
Ausgabe des HTML-Codes

Dieser Absatz hat die Standard-Schriftgröße.

Für diesen Absatz wird die Schrift vergrößert.

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

3. Der id-Selektor

Mit dem Attribut id="…" kann man im HTML-Code einem Element eine eindeutige id zuweisen. Diese id darf in dem HTML-Dokument maximal einmal verwendet werden. Mit dem id-Selektor kann man das HTML-Element mit CSS formatieren.

Der id-Selektor spricht das Element an, für das im HTML-Code das entsprechende id-Attribut im einleitenden HTML-Tag (z.B. <p id="intro">) angegeben wird.

Beachte:

  1. In der Style-Definition ist der id-Selektor der id-Name mit vorangestelltem Raute-Zeichen #.

  2. Der id-Name ist Case-sensitiv, d.h. Groß- und Kleinschreibung muss beachtet werden.

  3. Der id-Name darf nicht mit einem Bindestrich oder einer Ziffer beginnen.

  4. Eine definierte id darf im HTML-Code einer Webseite höchstens einmal verwendet werden.

  5. Der id-Selektor hat ein höheres Gewicht als ein class-Selektor.

Beispiel CSS

CSS id definieren

p {
/* Standard-Schriftgröße */
font-size: 1.0em;
}

.wichtig {
/* Font-Style: schräggestellt */
font-style: oblique;

/* Hintergrund: lightGreen */
background: #90ee90;

/* Schriftfarbe: mediumRed */
color: #da1f12;
}


#wichtig {
/* Hintergrund: lightMagenta */
background: #ec54f4;

/* Schriftfarbe: mediumBlue */
color: #0000cd;
}Beispiel HTML<p id="wichtig" class="wichtig">
Dieser Absatz ist wichtig. Für den Absatz ist die id "wichtig" und die Klasse "wichtig" definiert. Welche der beiden Definitionen wird angewendet?
</p>
Ausgabe des HTML-Codes

Dieser Absatz ist wichtig. Für den Absatz ist die id "wichtig" und die Klasse "wichtig" definiert. Welche der beiden Definitionen wird angewendet?

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Dieses Beispiel zeigt:

  1. Wenn eine Eigenschaft für den id-Selektor UND einen class-Selektor definiert ist, dann wird die Definition für den id-Selektor angewendet.

  2. Wenn eine Eigenschaft des class-Selektors für den id-Selektor nicht definiert ist, dann wird die Definition des class-Selektors angewendet. In diesem Beispiel gilt das für die Eigenschaft »font-style«, die nur für den class-Selektor definiert ist.

4. Der Universal-Selektor