checklist CSS Selektoren

CSS Selektoren werden verwendet, um auf verschiedene Elemente zu zielen. Somit weiss der Browser, welche Eigenschaften er zu welchem Element hinzufügen muss. Man kann verschiedene Selektoren kombinieren, um eine genauere Auswahl zu treffen.

element{ }

.klasse{ }

#id{ }

:pseudo{ }

So ist ein Selektor aufgebaut.

Schriftzeichen	Syntax	Bedeutung
. (Punkt)	.name_der_klasse	Wählt eine Klasse aus.
#	#name_der_id	Wählt eine ID aus.
element_name	Elementname	Wählt alle Elemente mit dem gleichen Tag aus. Beispiel: bei <h1> währe es h1.
:pseudoname	Anderer Selektor + : + Pseudoname	Wählt alle Elemente mit dem gleichen Tag aus. Beispiel: bei <h1> währe es h1.

Hier ist ein Selektor-Builder, jedoch nur auf Englisch.

Beispiele

Mit Klassen

<p class="red-text">Das ist mein Text</P>

.red-text { color: red; }

Mit ID's

<p id="red-text">Das ist mein Text</P>

#red-text { color: red; }

Mit Elementen

<p>Das ist mein Text</P>

p { color: red; }

Mit Pseudonamen

<p id="red-text">Das ist mein Text</P>

#red-text:hover { color: red; }

Kombiniert

<div class="container">
    <p>Mein Text</p>
</div>

.container p { 
    color: red; 
}