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.
Element-Selektoren
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; }
Ü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.
Klassen und ID's
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; }
Ü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.
Attribut-Selektoren
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; }
Kombinatoren
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; }
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; }
Vererbung und Gewichtung
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.