Selektor
"Selektoren" werden benötigt, um das entsprechende Element in HTML anzusprechen.
Es gibt verschiedene "Selektoren", die zum Teil auch miteinander kombinierbar sind.
Element-Selektor
"Elementselektoren" oder "Typselektoren" sprechen alle Elemente eines Typs an.
Das schon verwendete Beispiel zeigt eindeutig, wie durch CSS alle <p>-Elemente verändert werden.
p {color: blue;}
Dieser "Selektor" spricht alle <p>-Elemente an.
Wenn mehrere Elemente die gleichen Anweisungen bekommen sollen, dann können wir uns etwas Schreibarbeit sparen, in dem wir die "Selektoren" miteinander kombinieren (gruppieren).
p, h1 {
color: blue;
}
Um Elemente zu gruppieren, werden ein Komma und ein Leerzeichen zwischen den Elementen gesetzt.
Auf diese Weise können theoretisch unbegrenzt viele Elemente gruppiert werden.
p, h1, h2, h3 {
color: blue;
}
Eindeutige Kennzeichnung
In der Praxis kommt es häufig vor, das nur ein bestimmtes Element, diese eine Anweisung bekommen soll.
Um ein Element eindeutig zu identifizieren, verwenden wir die "id" aus dem HTML-Attribut "id".
Der "Selektor" bekommt den Namen des Wertes vom HTML Attribut mit vorangestelltem #-Symbol.
<body>
...
<ul>
<li id="liste1">Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
...
</body>
</html>
#liste1 {
color: blue;
}
Das #-Symbol wird verwendet, um in CSS anzugeben, dass wir auf eine "id" zugreifen möchten.
Klassen
Auf ähnlich weise wie die "Id" können wir auch "Klassen" definieren, um damit mehrere Elemente einer "Klasse" zu selektieren.
Anstelle des Attributs "id" verwenden wir das Attribut "class" und anstelle des #-Symbols vor dem "Selektor" verwenden wir den Punkt in CSS, um auf eine "Klasse" hinzuweisen.
<body>
...
<ul>
<li id="liste1">Listenpunkt 1</li>
<li class="klasse1">Listenpunkt 2</li>
<li class="klasse1">Listenpunkt 3</li>
</ul>
...
</body>
</html>
#liste1 {
color: blue;
}
.klasse1 {
color: red;
}
Universal-Selektor
Der "Universal-Selektor" wird in CSS mit dem *-Symbol definiert.
Dieser "Selektor" spricht alle, wirklich alle Elemente des HTML Dokuments an.
* {
border: 1px solid green;
}
Ein dünner grüner Rahmen wird um jedes einzelne Element gezeichnet.
So gut er auch funktioniert, wird immer wieder davon abgeraten, den "Universalselektor" einzusetzen, weil der Browser damit unnötig Mehrarbeit hat und das kratzt dann an der Performance, auch wenn das bei entsprechender Rechenleistung kaum auffällt.
Pseudoklassen
Wenn das zu verändernde Element aufgrund seiner "Eigenschaft" verändert werden soll und nicht weil es eine semantische Bedeutung hat oder einer gewissen "Klasse" angehört, dann greifen wir auf die sogenannten "Pseudoklassen" zurück.
Dabei wird das eigentliche Element erweitert, in dem wir einen Doppelpunkt direkt zwischen dem Element und der "Pseudoklasse" setzen (ohne Leerzeichen).
<body>
...
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
<ol>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
...
</body>
</html>
li:first-child {
background-color: gold;
}
li:nth-child(2) {
background-color: silver;
}
li:nth-child(3) {
background-color: rgb(205, 127, 50);
}
Das Beispiel zeigt gut, das die Platzierungen auf allen Listen gleichermaßen angewendet wurden.
Um zieldirekt nur die zweite Liste (<ol>) anzusteuern, bedienen wir uns entweder einer weiteren "Pseudoklasse" oder wir kombinieren das Element <ol> mit der bestehenden "Pseudoklasse".
ol li:first-child {
background-color: gold;
}
ol li:nth-child(2) {
background-color: silver;
}
ol li:nth-child(3) {
background-color: rgb(205, 127, 50);
}
Die erste Liste ist eine <ul> und die zweite Liste ist eine <ol> daher bleibt die erste Liste von der neuen Anweisung verschont.
Pseudoklassen für Hyperlinks
In CSS gibt es "Pseudoklassen", die es ermöglichen, auf Benutzeraktionen zu reagieren.
Das lässt sich an "Hyperlinks" besonders gut demonstrieren. In der HTML-Datei erstellen wir die 2 "Hyperlinks" am besten direkt am Seitenanfang.
<body>
<a href="https://www.example.com">example.com</a>
<a href="https://www.cindiy.de">cindiy.de</a>
...
</body>
</html>Sofern ein Link zu einer bereits besuchten Seite führt, wird er in "Lila" dargestellt. Sollte ein Link zu einer noch nicht besuchten Seite führen, dann wird er vom Browser in "Blau" dargestellt.
Über die "Pseudoklassen" "a:link" und "a:visited" können wir auf die "Eigenschaften" der Links zugreifen.
a:link {
background-color: lightgreen; /*Unbesuchte Webseiten*/
}
a:visited {
background-color: lightcoral; /*Bereits besuchte Webseiten*/
}
Neben den "Pseudoklassen" "a:link" und "a:visited" gibt es noch die "Pseudoklasse" "a:hover", die für den Effekt verantwortlich ist, wenn wir mit dem Mauscursor über einen Link schweben.
a:link {
background-color: lightgreen; /*Unbesuchte Webseiten*/
}
a:visited {
background-color: lightcoral; /*Bereits besuchte Webseiten*/
}
a:hover {
background-color: yellow; /*Mauscursor über ein Link*/
}
Wenn der Mauscursor jetzt über ein Link schwebt, wird dieser mit gelber Hintergrundfarbe dargestellt.
Das was die "Pseudoklasse" "a:hover" für den Mauscursor ist, wird für die Tastatursteuerung mit der "Pseudoklasse" "a:focus" umgesetzt.
Wenn mit der Tabulatortaste auf der Tastatur ein Link erreicht wird, dann wird die Anweisung der "Pseudoklasse" "a:focus" ausgeführt.
a:link {
background-color: lightgreen; /*Unbesuchte Webseiten*/
}
a:visited {
background-color: lightcoral; /*Bereits besuchte Webseiten*/
}
a:hover {
background-color: yellow; /*Mauscursor über ein Link*/
}
a:focus {
background-color: yellow; /*Tastatur erreicht einen link*/
}
In der Praxis werden "a:hover" und "a:focus" häufig die gleichen Anweisungen gegeben, daher bietet sich die einfachere Schreibweise mit dem gruppierten Selektor an.
a:link {
background-color: lightgreen; /*Unbesuchte Webseiten*/
}
a:visited {
background-color: lightcoral; /*Bereits besuchte Webseiten*/
}
a:hover, a:focus {
background-color: yellow; /*Anvisierter Link*/
}
In dem Moment, wenn der Link betätigt wird, also der Moment, in dem zum Beispiel die Maustaste durchgedrückt wird, greifen wir auf die "Pseudoklasse" "a:active" zu.
a:link {
background-color: lightgreen; /*Unbesuchte Webseiten*/
}
a:visited {
background-color: lightcoral; /*Bereits besuchte Webseiten*/
}
a:hover, a:focus {
background-color: yellow; /*Anvisierter Link*/
}
a:active { /*Moment der Betätigung*/
background-color: royalblue;
color: white;
}
Bei der Vergabe der "Pseudoklassen" ist unbedingt darauf zu achten, das die Reihenfolge eingehalten wird, damit es nicht zu Fehlern in der Darstellung kommt.
- a:link
- a:visited
- a:hover und a:focus (Reihenfolge egal)
- a:active
Also zuerst unbesuchte Seiten, dann besuchte Seiten, dann schweben wir über den Hyperlink und dann wird geklickt.
Weiter mit Boxmodell