CSS/Tutorials/Einstieg/Selektoren
Text-Info
- 20min
- einfach
- Einstieg in CSS
Der dritte Teil unseres Tutorials Einstieg in CSS führt Sie in die Welt der Selektoren ein, mit denen Sie Webseiten und deren Elemente zielgenau auswählen und formatieren können.
Inhaltsverzeichnis
Elemente selektieren[Bearbeiten]
Typselektor[Bearbeiten]
Mit dem Element- bzw. Typselektor werden alle Elemente eines Typs angesprochen.
h1 {
color: red;
}
h1, h2 {
background-color: #eee;
border-radius: .5em;
}
Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist.
Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht.
ids und Klassen[Bearbeiten]
Oft will man innerhalb eines Texts nur einen Absatz anders formatieren. Dafür gibt es mindestens zwei Möglichkeiten:
Sie können jedem HTML-Element mit dem Universalattribut id einen eindeutigen, unverwechselbaren Bezeichner geben, den Sie dann als id-Selektor verwenden können.
#warnung {
color: red;
border-left: 5px solid;
padding-left: 5px;
}
<div id="warnung">
<h2>Beachten</h2>
<p>Sie können eine id innerhalb eines HTML-Dokuments nur einmal verwenden!</p>
</div>
Das id-Attribut wird im CSS mit einer Raute (hash) und dem Namen als Selektor verwendet. Das so angesprochene Element erhält nun einen roten Rand links und eine rote Textfarbe. Damit der Rand nicht an den Text stößt, erhält das div noch einen linken Innenabstand von 5px.
Falls Sie mehrere Elemente stylen wollen, empfiehlt sich das Universalattribut class. Damit können Sie auch unterschiedliche Elemente formatieren:
.warnung {
color: red;
}
p.warnung {
border: thin solid red;
background-color: peachpuff;
}
<h2 class="warnung">
Dies sind einige Möglichkeiten, die Klasse <code>warnung</code>
auf verschiedene HTML-Elemente anzuwenden.
</h2>
<p class="warnung">Bitte die AGB lesen!</p>
<p><strong class="warnung">Achtung:</strong> Bitte die AGB lesen!</p>
Das Beispiel selektiert alle Elemente mit der Klasse warnung. Der Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
Der Regelsatz gibt den angesprochenen Elementen die Textfarbe rot.
Sie können den Klassenselektor aber auch mit einem Typselektor kombinieren. So spricht p.warnung alle Absätze dieser Klasse an, die zusätzlich einen roten Rand und einen hautfarbenen Hintergrund erhalten.
Was passiert, wenn ein Element sowohl einen id- als auch einen Klassenselektor hat und dann widersprüchliche CSS-Festlegungen? Dann wird der Selektor mit der höheren Spezifität verwendet und der andere ignoriert.
Information: Klassennamen
blauerText oder roterRahmen. Viel besser ist es, seine Seite semantisch zu klassifizieren. Zusammen mit semantischem HTML und strukturellen Pseudoklassen sind Klassennamen oft nicht nötig. Sind Klassen zur Identifikation von bestimmten Seitenbereichen unvermeidbar, so soll die Klasse die Rolle beschreiben, die dieses HTML-Element auf der Seite einnimmt.
Eine Empfehlung des W3C[1]
Gute Namen ändern sich nicht. Denken Sie darüber nach, warum etwas ein bestimmtes Aussehen haben soll und nicht, wie es aussehen soll. Optik ist veränderlich, aber der Grund, warum irgend etwas eine bestimmte Optik haben sollte, bleibt der gleiche.
Gute Namen sind warnung, downloadableImage oder subMenu. Sie beschreiben, was ein bestimmtes Element repräsentiert, und werden sich vermutlich nicht so schnell ändern. Eine Warnung wird immer eine Warnung bleiben, ganz gleich, wie sich das Design der Seite ändert.
rahmen4px, textHell oder schönerHintergrund. Vielleicht wollen Sie den Rahmen doch auf üppige 5 Pixel aufblasen, oder der Hintergrund sieht irgendwann ganz schön langweilig aus und ist überhaupt nicht mehr schön. Der Vorteil beim Einsatz von CSS besteht darin, dass Sie nicht viel ändern müssen, um das Aussehen Ihrer Webseite zu verändern. Wenn Sie ihre ganzen hellen Texte in dunkle Texte ändern müssen, und deswegen auf allen Ihren HTML-Seiten Klassennamen ändern müssen, dann werden Sie vermutlich ein paar übersehen.
Pseudoklassen[Bearbeiten]
Häufig soll aber ein Element der Webseite nicht aufgrund seiner semantischen Bedeutung, sondern aufgrund der Position innerhalb der Webseite besonders formatiert werden. Der umständliche Weg wäre, dem betreffenden Element eine Klasse zu geben und, wenn sich die Position verändert, das HTML-Markup entsprechend anzupassen.
Mit der strukturellen Pseudoklasse :first-child können Sie das erste Element ansprechen.
li {
width: 10em;
text-align: center;
}
li:first-child {
background-color: gold;
border: thin solid;
border-radius: 5px;
}
Das Beispiel selektiert das erste li-Element und gibt ihm eine goldene Hintergrundfarbe und einen abgerundeten Rahmen.
Falls sich das Markup ändert, bleibt die Formatierung der Siegerliste gleich.
Leider gibt es keinen second-child-Selektor. Sie können aber mit :nth-child()-Selektor beliebige Elemente ansprechen.
li:nth-child(2) {
background-color: lightgrey; /* silver */
border: thin solid;
border-radius: 5px;
}
li:nth-child(3) {
background-color: #cd7f32; /* bronze */
border: thin solid;
border-radius: 5px;
}
Das Beispiel selektiert mit nth-child() das zweite und dritte li-Element und gibt ihm eine silberne, bzw. bronzene Hintergrundfarbe und einen abgerundeten Rahmen.
Der :nth-child()-Selektor kann mit den Werten even und odd (engl. für gerade und ungerade) auch jedes zweite Element ansprechen und so eine Tabelle mit einem Zebra-Look anschaulicher gestalten:
th {
background-color: #666;
color: #fff;
}
tr {
background-color: #fffbf0;
color: #000;
}
tr:nth-child(odd) {
background-color: #e4ebf2 ;
}
In diesem Beispiel wird eine Tabelle dargestellt.
Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit
tr:nth-child(odd) {
background-color: #e4ebf2 ;
}
anders eingefärbt.
Wenn Sie neue Abschnitte und Elemente in Ihre Webseite einfügen, verändert sich unter Umständen die Position und Reihenfolge und so können andere als die gewünschten Elemente selektiert werden.
Benutzeraktionen sichtbar machen[Bearbeiten]
dynamische Pseudoklassen[Bearbeiten]
Eine der Besonderheiten von HTML-Seiten gegenüber reinen Text-Dateien ist die Interaktivität. Die ersten zwei Buchstaben von HTML bedeuten ja Hypertext, d. h., dass Text oder Bilder auf andere Seiten verweisen können und ein Klick diese aufruft. Auch bei Formularen können Sie mit der Webseite „kommunizieren“.
Dynamische Pseudoklassen selektieren Elemente aufgrund einer Benutzeraktion. Diese können dann mit CSS formatiert werden.
Die Pseudoklassen :hover, :active und :focus sprechen auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die
- mit dem Mauszeiger berührt werden (
:hover; englisch to hover: schweben), - den Fokus (
:focus) erhalten, zum Beispiel durch die Tabulatortaste ↹ oder - aktuell angeklickt sind (
:active).
Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar. Allerdings ist es nicht sinnvoll, normalen Text beim Überfahren mit der Maus anders zu formatieren.
a:focus { background-color: red; color: black;}
a:hover { background-color: blue; color: white; }
a:active { background-color: yellow; color: black; }
<ul>
<li><a href="https://selfhtml.org">selfhtml</a></li>
<li><a href="https://forum.selfhtml.org">selfhtml Forum</a></li>
<li><a href="https://wiki.selfhtml.org">selfhtml Wiki</a></li>
</ul>
Link-Elemente, die mit der Tabulatortaste ↹ ausgewählt werden, erhalten einen roten Hintergrund, werden sie mit dem Mauszeiger berührt, wechselt der Hintergrund zu blau, während die Links angeklickt sind, ist ihre Hintergrundfarbe gelb.
:focus zuvor notierte Eigenschaften für :hover, sodass ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.
Elemente hinzufügen[Bearbeiten]
Pseudoelemente[Bearbeiten]
Mit CSS können Webseiten in ihrem Aussehen verändert werden. Häufig will man neben dem Inhalt noch weitere Gestaltungselemente wie Trennlinien, Dekorationsgrafiken, etc. verwenden. Eine Trennlinie kann als thematischer Bruch mit hr ausgezeichnet, aber auch durch ein border-bottom festgelegt werden.
Bilder, die Teil des Inhalts darstellen, werden im HTML eingebunden. Dekorationsgrafiken sollten aber als Hintergrundbild oder mithilfe von Pseudoelementen, die nicht im Markup erscheinen, eingebunden werden.
Dekorationselemente sollten nicht im Markup, sondern nur im CSS verankert werden.
Die Selektoren
erzeugen Pseudoelemente. Diese stehen vor bzw. nach dem Element und sind im Seiteninspektor (F12) als Kindelemente sichtbar.
.hinweis::before {
content: 'Warnhinweis: ';
background-color: red;
color: white;
font-weight: bold;
padding: 0 1em;
margin-right: 1em;
}
a::after {
content: url("https://src.selfhtml.org/dok.gif");
margin-left: .1em;
}
Elemente mit der Klasse .hinweis erhalten ein ::before-Pseudoelement, das vor dem eigentlichen Element dargestellt wird. Die content-Eigenschaft enthält das Wort Warnhinweis als Inhalt. Dies wird mit rotem Hintergrund und fettem, weißem Text herausgehoben.
Links erhalten ein ::after-Pseudoelement, das nach dem Linkttext angezeigt wird. Der content-Eigenschaft wird als Wert die URL einer Grafik zugewiesen.
In HTML/Tutorials/Links/Gestaltung mit CSS sehen Sie, wie Sie interne und externe Links durch SVG-Grafiken kennzeichnen können.
Pseudoelemente als Aufzählungszeichen[Bearbeiten]
HTML bietet einige Aufzählungszeichen für ungeordnete Listen. Sie können diese auch durch Pseudoelemente ersetzen und vielfältig gestalten:
a {
padding: 0 1em;
position: relative;
}
a::before {
content: '';
width: 0;
height: 0;
font-size: 0;
border: thick solid transparent;
border-left-color: currentColor;
position: absolute;
top: 3px;
left: 0;
}
a:hover::before {
background: yellow;
}
li {
list-style-type: none;
line-height: 200%;
}
Links erhalten ein ::before-Pseudoelement. Anders als in den oberen Beispielen bleibt der Wert für content leer. Das Pseudoelement wird in Breite, Höhe und Zeilengröße auf 0 gesetzt, erhält aber einen breiten, transparenten Rand. Nur dem linken Rand wird durch border-left-color: currentColor; der Farbwert currentColor, die aktuelle Textfarbe zugewiesen.
Sie können Pseudoelemente mit position: absolute aus dem Elementfluss herausnehmen und beliebig platzieren. Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position: positioniert wurde. Deshalb erhält das a-Element ein position: relative;.
Mehr über Breiten, Innen- und Außenabstände erfahren Sie im Box-Modell-Tutorial!
Weblinks[Bearbeiten]
- W3C: Selectors Level 4 Editor’s Draft, 11 October 2017
Quellen
- ↑ W3C: Tips for Webmasters
