The Element selector

Der einfachste Typ von Selektoren ist vermutlich der, welcher normale HTML-Elemente anspricht. Zum Beispiel kannst du alle Paragraphen (<p>) ansprechen, indem du einfach dessen Namen in dein Stylesheet schreibst:

p {
	color: Red;
}

Mit dieser einfachen Regel haben wir die Schriftfarbe aller Paragraphen auf Rot geändert – der Element-Selektor ist sehr stark.

Du kannst jedes valide HTML-Element auf diese Weise ansprechen, und selbst nichtexistente Elemente können so angesprochen werden. Wenn du ein <tiger>-Tag auf deiner Seite möchtest, kannst du auch einen Selektor dafür schreiben (dies wird jedoch im W3-Validator nicht validieren)

Meistens spricht der Element-Selektor also normale HTML-Tags an. Zum Beispiel kannst du entscheiden, dass bold-Tags nicht mehr fett dargestellt werden sollten:

b {
	font-weight: normal;
}

Das interne Stylesheet der meisten Browser legt fest, dass bold Tags fett dargestellten Text haben sollen, doch mit CSS ist das einfach zu ändern. Entweder lokal (mehr dazu später), oder global, wie wir es gerade getan haben.

Hier ist ein vollständigeres Beispiel, bei dem wir anwenden, was wir gerade gelernt haben. Du kannst dir das Beispiel näher ansehen und damit herumspielen:

<style type="text/css">
p {
	color: Red;
}

b {
	font-weight: normal;
}
</style>

<p>Here's a paragraph!</p>

<p>Here's another <b>paragraph</b> - the word paragraph would normally be bold here!</p>

Zusammenfassung

Der größte Vorteil von Element-Selektoren ist, dass sie global greifen – an jeder Stelle, wo dein Stylesheet referenziert wird, wird es deine Elemente beeinflussen. Gleichzeitig ist dies jedoch auch der größte Nachteil der Element-Selektoren, weil du manchmal nicht wirklich alle Paragraph-Tags rot färben möchtest. Glücklicherweise gibt es weitere Optionen, wie Klassen- oder ID-Selektoren, welche wir als nächstes behandeln werden.