CSS/Tutorials/Einstieg/Selektoren
Der vierte 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: #ccc;
border-radius: .5em;
}
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>
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: 1px 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>
warnung. Der Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
Der Regelsatz gibt den angesprochenen Elementen die Textfarbe rot.
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.
Exkurs: Klassennamen[Bearbeiten]
Oft gerät man beim Aufbauen eines Stylesheet in die Versuchung, die zu stylenden HTML Elemente mit Klassen zu versehen, die das gewünschte Aussehen dieser Elemente beschreiben, und gibt ihnen Namen wie 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.
Schlechte Namen wären 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 Text 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: 1px solid;
border-radius: 5px;
}
Falls sich das Markup ändert, bleibt die Formatierung der Siegerliste gleich.v
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: 1px solid;
border-radius: 5px;
}
li:nth-child(3) {
background-color: #cd7f32; /* bronze */
border: 1px solid;
border-radius: 5px;
}
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 ;
}
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, Text beim Überfahren mit der Maus anders zu formatieren.
a { padding: .2em; }
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>
:focus zuvor notierte Eigenschaften für :hover, sodass ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.:hover problematisch. Beispielsweise kann dies zur Nichtbedienbarkeit einer Navigation führen, falls Unterpunkte per :hover ausgeklappt werden sollen.
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;
}
.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 richtig gestalten 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: 8px 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%;
}
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 nächsten Kapitel!
Weblinks[Bearbeiten]
- W3C: Selectors Level 4 Editor’s Draft, 11 October 2017
- ↑ W3C: Tips for Webmasters
h1, der allen h1-Elementen die Textfarbe rot zuweist.Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren
h1undh2, die alle Überschriften vom Typ h1 und h2 anspricht.