Homepage-Webhilfe Event-Banner

Selektoren

Selektoren dienen dazu, bestimmte Elemente Ihres HTML-Dokuments zu selektieren (auszuwählen) und auf diese CSS-Eigenschaften anzuwenden. Unterschieden wird hier zwischen 3 verschiedenen Arten von Selektoren, welche wir Ihnen hier vorstellen werden. Am Ende dieses Themas werden Sie zudem noch die Kombinatoren kennenlernen, welche es ermöglichen, den Selektor noch genauer zu spezifizieren.


Die einfachste Art von Selektoren sind die Element-Selektoren. Der Name von Element-Selektoren entspricht immer dem Namen des (HTML-)Elements. Wir können hier also z. B. alle Elemente des Typs h1, h2, h3, p, article, section oder nav auswählen, indem wir lediglich den Namen des HTML-Elements als Selektor angeben. Das folgende Beispiel weist den Überschriften h1, h2 und h3 unterschiedliche Schriftfarben zu. Dies geschieht mittels der color-Eigenschaft, welche wir im Thema Schrift nochmals genauer erklären werden.

h1
{
	color: blue;
}

h2
{
	color: red;
}

h3
{
	color: lime;
}
Vorschau

Übrigens: Wenn Sie alle Elemente selektieren möchten, können Sie das Sternzeichen * als Selektor verwenden. Eingesetzt wird dieser Selektor z. B. um eine Schriftart für die ganze Seite zu setzen. Eine Verwendung des *-Selektors in Zusammenhang mit Kombinatoren ist ebenfalls möglich.


Mit der obigen Variante ist es jedoch nicht möglich, ein einzelnes Element oder eine Gruppe von Elementen zu selektieren. Stellen Sie sich vor, Sie haben mehrere h1 Überschriften, aber nur eine davon soll per CSS über eine spezielle Formatierung designt werden. Ein anderes Beispiel wäre, dass Sie mehrere h2-Überschriften haben und nur ein paar dieser h2-Überschriften sollen bestimmte CSS-Regeln zugewiesen bekommen. Für solche Fälle gibt es sogenannte Klassifizierungen und Identifikationen (abgekürzt Klassen und ID's).

Um ein Element zu klassifizieren, benötigen wir das class-Attribut. Dieses wird innerhalb des Start-Tags unseres HTML-Elements notiert. Soll ein Element mehrere Klassen besitzen, so werden diese über Leerzeichen getrennt. Der Name der Klasse ist frei definierbar, darf jedoch keinen Punkt und kein Leerzeichen enthalten und muss für dieses Dokument eindeutig sein. Normalerweise werden für Klassennamen nur Buchstaben und Unterstriche verwendet, da es andernfalls Kompatibilitäts-Probleme mit manchen (u. a. älteren) Browsern geben kann. Eine Klassifizierung kann auf mehrere Elemente angewendet werden. Hierzu bekommen einfach alle Elemente, die zu dieser Klasse gehören, das class-Attribut mit dem Namen der Klasse zugewiesen. Der Typ der Elemente muss dabei nicht zwingend gleich sein. In CSS werden Klassen-Selektoren direkt mit dem Namen und einem vorangestellten Punkt . angegeben.

Mit Hilfe der Identifikation kann ein einzelnes Element direkt „angesprochen“ werden. Eine Identifikation erfolgt in HTML über das id-Attribut, welches Sie vielleicht bereits aus dem HTML-Kurs (Thema Links, Anker) kennen. Die Namensregeln sind hierbei gleich wie bei Klassen. Jedes Element darf jedoch maximal eine ID besitzen. Des Weiteren ist darauf zu achten, dass ein Identifikationsname nur einmal pro Dokument verwendet werden darf. Die Angabe einer ID als Selektor in CSS erfolgt mit einem #-Zeichen und dem Namen der Identifikation.

<h1 id="titel">Überschrift 1</h1>
<h2 class="untertitel">Überschrift 1.1</h2>
<h2>Überschrift 1.2</h2>
<h2 class="untertitel">Überschrift 1.3</h2>
<h1>Überschrift 2</h1>
<h2>Überschrift 2.1</h2>
<h2 class="untertitel">Überschrift 2.2</h2>
<h2 class="untertitel">Überschrift 2.3</h2>
<h2 class="untertitel">Überschrift 2.4</h2>
#titel
{
	color: blue;
}

.untertitel
{
	color: red;
}
Vorschau

Übrigens: Oftmals könnten wir Formatierungen von Identifikationen direkt im style-Attribut des HTML-Elements angeben. Auf Grund des MVC-Konzepts wird jedoch das Verfahren mit ID's bevorzugt. Das style-Attribut sollte nur verwendet werden, wenn es sich um eine einzelne Formatierung, eine Ausnahme oder einen Test handelt.


Bisher konnten wir nur Elemente über den Element-Namen oder über den „Umweg“ mit Klassen und ID's selektieren. Doch es ist auch möglich, Elemente mittels dessen Attribute zu selektieren. Das Attribut wird hierfür in eckige Klammern [] notiert. Innerhalb dieser muss der Name des Attributs notiert werden. Es ist natürlich auch möglich, Elemente mit einem bestimmten Attribut und einem bestimmten Wert zu selektieren. Alle verfügbaren Attribut-Selektoren sind in folgender Tabelle aufgestellt:

[name] Selektiert Elemente mit dem name-Attribut.
[name="wert"] Selektiert Elemente mit dem name-Attribut, bei welchen der Wert "wert" entspricht.
[name~="wert"] Selektiert Elemente mit dem name-Attribut, welche im Wert das Wort "wert" enthalten.
[name|="wert"] Selektiert Elemente mit dem name-Attribut, welche im Wert mit dem Wort "wert" beginnen.
[name^="wert"] Selektiert Elemente mit dem name-Attribut, welche im Wert mit den Zeichen "wert" beginnen.
[name$="wert"] Selektiert Elemente mit dem name-Attribut, welche im Wert mit den Zeichen "wert" enden.
[name*="wert"] Selektiert Elemente mit dem name-Attribut, welche im Wert die Zeichen "wert" enthalten.

Und hier nun noch ein Beispiel mit Attribut-Selektoren:

<h1 title="Überschrift 1">Beispiele</h1>
<a href="selektorenelemente.html" target="_blank">Zum Beispiel "Element-Selektoren" ...</a><br />
<a href="selektorenklassenid.html" target="_blank">Zum Beispiel "Klassen und IDs" ...</a><br />
<br />
<p title="Klicken Sie auf den Link, um zurück zur Erklärung zu kommen.">
	Link zum Thema:
	<a href="https://www.homepage-webhilfe.de/CSS/selektoren.php">hier klicken</a>
</p>
[title]
{
	color: red;
}

[target="_blank"]
{
	color: green;
}
Vorschau

Kombinatoren erlauben es, Selektoren noch genauer zu spezifizieren. So können Sie z. B. mit Kombinatoren bestimmte Elemente (per Typ oder Klasse) selektieren, welche sich in einem anderen Element befinden. Eine Aufstellung der Kombinationen finden Sie in folgender Tabelle:

a b Leerzeichen: Selektiert alle b-Elemente, welche sich innerhalb eines a-Elements befinden.
a > b Größer-als: Selektiert alle b-Elemente, welche sich direkt innerhalb eines a-Elements befinden.
a, b Komma: Selektiert alle a- und b-Elemente.
a ~ b Tilde: Selektiert alle b-Elemente, welche sich nach einem a-Element befinden.
a + b Plus: Selektiert alle b-Elemente, welche sich direkt nach einem a-Element befinden.

Das folgende Beispiel zeigt die Verwendung der Kombinatoren und >:

<div>
	<p>...</p>
	<article>
		<p>...</p>
		<p>...</p>
	</article>
	<p>...</p>
</div>
div p
{
	color: blue;
}

div > p
{
	color: red;
}
Vorschau

Wichtig: Beim obigen Beispiel ist die Reihenfolge der Notation der zwei CSS-Regelblöcke entscheidend, denn die Regel div p trifft auch auf alle p-Elemente innerhalb des div-Elements zu und somit auch auf die p-Elemente innerhalb des article-Elements. Durch die Regel div > p wird jedoch die erste Regel für alle p-Elemente außerhalb des article-Elements überschrieben.

Das folgende Beispiel zeigt die Verwendung der Kombinatoren ,, + und ~:

<main>
	<h1>Überschrift 1</h1>
	<article>
		<h2>Überschrift 1.1</h2>
		<h3>Überschrift 1.1.1</h3>
		<h3>Überschrift 1.1.2</h3>
	</article>
	<article>
		<h2>Überschrift 1.2</h2>
		<h3>Überschrift 1.2.1</h3>
		<h3>Überschrift 1.2.2</h3>
	</article>
	<article>
		<h2>Überschrift 1.3</h2>
		<h3>Überschrift 1.3.1</h3>
		<h3>Überschrift 1.3.2</h3>
		<h3>Überschrift 1.3.3</h3>
	</article>
</main>
<article>
	<h1>Überschrift 2</h1>
	<h3>Überschrift 2.1.1</h3>
	<h3>Überschrift 2.1.2</h3>
</article>
h1, h2
{
	color: blue;
}

h2 + h3
{
	color: red;
}

h1 ~ h3
{
	color: lime;
}
Vorschau

Zum Schluss dieses Themas müssen wir uns noch mit einem theorielastigen Teil beschäftigen, denn bei CSS gibt es noch die sogenannte Vererbung und Gewichtung.

Die Vererbung legt fest, dass Formatierungen, die auf ein Element angewendet werden, nicht nur auf das Element selbst angewendet wird, sondern auch auf dessen Kind-Elemente. Vererbt werden natürlich nicht alle CSS-Eigenschaften, sondern hauptsächlich Schriftformatierungen.

Als Gewichtung wird der Rang bezeichnet, welche die einzelnen CSS-Regeln haben. So haben z. B. Formatierungen, welche im style-Attribut eines Elements angegeben werden Vorrechte und überschreiben somit CSS-Regeln, welche innerhalb der style-Tags oder in einer CSS-Datei notiert sind.

Eigenschaften, welche für bestimmte Elemente gelten (Element-Selektoren), können durch Eigenschaften von Klassen oder ID's überschrieben werden. Stellen Sie sich vor, Sie haben ein p-Element. Alle p-Elemente verfügen über die Schriftfarbe blau, da Sie diese mittels der color-Eigenschaft in einem Element-Selektor für das p-Element festgelegt haben. Nun haben Sie eine Klasse mit dem Namen schwarz, in welcher die Schriftfarbe auf schwarz gesetzt wird. Wird die Klasse nun bei einem der p-Elemente notiert, so wird die ursprüngliche Schriftfarbe von blau durch schwarz ersetzt.

Verfügt ein Element sowohl über eine Klasse als auch über eine ID, so haben die Eigenschaften der ID gegenüber den Eigenschaften der Klasse Vorrang.

Bei der Gewichtung spielt zusätzlich noch die Notationsreihenfolge eine entscheidende Rolle. Haben wir also z. B. zwei Klassen in welchen beide die Schriftfarbe notiert ist und ein p-Element, welches beide Klassen zugewiesen bekommen hat, dann „gewinnt“ die zuletzt notierte Schriftfarbe (also die der 2. Klasse).

Zum Schluss muss noch erwähnt werden, dass CSS-Regeln, welche im Browser implementiert sind (z. B. die Schriftfarbe von Links), explizit überschrieben werden müssen. Es reicht also nicht z. B. nur dem p-Element, in welchem wir das a-Element platziert haben, eine Schriftfarbe zuzuweisen. Diese Schriftfarbe wird dann zwar für das p-Element übernommen, nicht jedoch für die enthaltenen Links.


Wichtig: Es gibt auch die Möglichkeit, Selektoren zu überqualifizieren (overqualified), d. h. dass z. B. zusätzlich zu einem Klassennamen auch noch ein Elementname angegeben wird. Dies hat beim genannten Beispiel zur Folge, dass die Klasse auf ein bestimmtes Element eingeschränkt wird. Wir könnten dadurch also auch für einen Klassennamen zwei komplett unterschiedliche CSS-Regeln entwerfen, wovon sich die eine z. B. auf h1-Elemente und die andere auf p-Elemente beziehen. Bei der Notation müssen wir vor dem Klassennamen das Element angeben. Hinter dem Elementname folgt dann direkt der Punkt und der Name der Klasse. Hier ein kurzes Beispiel:

h1.text
{
    color: red;
}

p.text
{
    color: blue;
}

Das Gleiche ist natürlich auch mit Identifikationen möglich:

h1#text
{
    color: red;
}

p#text
{
    color: blue;
}

Eine Verwendung von überqualifizierten Selektoren im Zusammenhang mit Attribut-Selektoren ist ebenfalls denkbar:

h1[title]
{
    color: red;
}

p[title]
{
    color: blue;
}

Die Kombination der Seleketoren beim Überqualifizieren ist dabei auf ganz verschiedene Art und Weisen möglich. So wäre z. B. auch folgender Syntax gültig:

h1[title]#text
{
    color: red;
}

p[title].text
{
    color: blue;
}

Eine Überqualifizierung sollte jedoch immer nur dann eingesetzt werden, wenn sie wirklich von Nöten ist, da das Überqualifizieren leichte Performance-Einbrüche mit sich bringt.

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK