English
With the help of CSS selectors you can access certain HTML elements and then style them as you wish. You can not only select a tag, but also create groups and relationships between HTML elements. This allows you to edit multiple HTML elements at the same time. Here are a few examples of commonly used selectors.
- TAG
If you specify a tag, for example p, then this style will affect all paragraphs within the HTML file.
- .classname
A class is used when you want to style a certain number of elements at the same time. Caution! Classes overwrite the style. In this example all paragraphs p are overwritten with the style as defined in the class.
You can assign an ID to each HTML element. An ID must be unique. This is used when you want to style only this one element. Caution! Also here tag styles and even class styles are overwritten.
The order of overrides are: ID > Class > Tag
Now there is the possibility to select several elements or to create relations between elements in order to style them.
- elem_1, elem_2, ... , elem_n
With a comma between elements, you can select and style several at once.
- outer inner
Selects all inner elements that are inside the outer element. In this example the outer element is a DIV and the inner elements are all with the class 'inner_div'.
- parent > children
Selects all children whose parents are parent.
Deutsch
Mithilfe von Selektoren kann man auf bestimmte HTML-Elemente zugreifen und diese dann nach belieben stylen. Man kann nicht nur ein
bestimmten Tag auswählen, sondern auch Gruppen und Beziehungen zwischen HTML-Elementen hererstellen. Damit lassen sich mehrere
HTML-Elemente gleichzeitig bearbeiten. Hier folgen ein paar Beispiel von häufig genutzten Selektoren.
- Tag
Wenn man ein Tag angibt, zum Beispiel p, dann hat dieser Style auswirkungen auf alle Paragraphen innerhalb der HTML-Datei.
- .classname
Eine Klasse verwendet man dann, wenn man eine bestimmte Anzahl an Elementen gleichzeitig stylen möchte.
Vorsicht! Klassen überschreiben den Style. In diesem Beispiel werden alle Paragraphen p mit dem
Style wie er in der Klasse definiert wird überschrieben.
Man kann jedem HTML-Element eine ID vergeben. Eine ID muss eindeutig sein. Diese wird verwendet wenn man nur dieses eine Element stylen möchte.
Vorsicht! Auch hier werden Tag-Styles und sogar Klassenstyles überschrieben.
Die Reihenfolge von Überschreibungen lauten: ID > Class > Tag
Nun gibt es noch die Möglichkeit mehrere Elemente auszuwählen oder Beziehungen zwischen Elementen zu erstellen um diese
dann zu stylen.
- elem_1, elem_2, ... , elem_n
Mit einem Komma zwischen Elemente kann man mehrere gleichzeitig auswählen und stylen.
- outer inner
Selektiert alle inneren Elemente die sich innerhalb des äußeren Elements befinden. In diesem Beispiel
ist das äußere Element ein DIV und die inneren Elemente alle mit der Klasse 'inner_div'.
- parent > children
Selektiert alle Kinder dessen Eltern parent sind.
Edit: Damit ihr dieses Beispiel mal ausprobieren könnt, kopiert dazu den Inhalt der folgenden HTML-Datei und speichert es als Textdatei mit der Endung *.html ab. Zum Beispiel: index.html.
Den Inhalt der folgenden CSS-Datei auch als Textdatei 'selectors1.css' im selben Verzeichnis abspeichern. Danach einfach die HTML-Datei mit dem Browser eurer Wahl öffnen.
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="description" content="CSS Selectors">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel='stylesheet' type='text/css' href='selectors1.css'>
</head>
<body>
<p>A text outside a container</p>
<div>
<p>First paragraph inside a container</p>
<p class='group'>Paragraph with a class</p>
<ul>
<li>Listitem 1</li>
<li>Listitem 2</li>
<li><p id='unique'>Listitem 3</p>li>
<li>Listitem 4</li>
<li>Listitem 5</li>
<li><p class='group'>Paragraph with a class</p>li>
</ul>
</div>
<h4>A header under the container, called div</h4>
<p class='group'>Paragraph with a class</p>
<hr>
<div id='relation'>
<p>Text within the relation div</p>
<h5>Headertext</h5>
<div>
<p class='inner_div'>Text inside inner div</p>
<p class='inner_div'>Text inside inner div</p>
<p class='inner_div2'>Text inside inner div</p>
<p class='inner_div2'>Text inside inner div</p>
</div>
</div>
</body>
CSS
p {
font-size: 20px;
}
.group {
font-size: 14px;
font-style: bold;
color:red;
}
#unique {
font-size: 10px;
border-style: ridge;
}
/** create a border for all h5 and this specific div with the ID=relation **/
h5, #relation {
border-style: solid;
}
/** selects all classes with the name 'inner_div', if exists, inside all div **/
div .inner_div {
font-style: italic;
}
/** selects all classes with 'inner_div2' where the parent is a div **/
div > .inner_div2 {
color:blue;
}