CSS Selectors

css · tipps · html

Eine leistungsfähige Funktion von CSS, sind die sogenannten CSS Selectors. Über CSS Selectors lassen sich einfach und präzise bestimmte Elemente per CSS ansprechen.

Folgende CSS Selectors wollen wir erklären:

  • * selector
  • > selector
  • + selector
  • ~ selector

* selector

* {color:green}

Jedes Element wird angesprochen und erscheint somit in grüner Schrift.

> selector

body > p {color:green;}

> bedeutet “child of” - zu Deutsch: Kind von. Jedes p, das direktes “child of” body ist, wird grün dargestellt. Ist ein p nochmals in einem div verschachtelt, wird es nicht angesprochen.

+ selector

pre + p{color:green}

pre + p spricht alle p-Elementer an, die direkt nach einem pre folgen.

<pre>pre + p {color: red;}</pre>
<p>Dieser Paragraph folgt pre und wird angesprochen.</p>
<p>Der zweite Paragraph wird nicht angesprochen.</p>

~ selector

pre ~ p {color: green;}

pre ~ p spricht alle p-Elemente an, die nach einem pre folgen. Im Vergleich zu pre + p wird hier nicht nur das nächste P angesprochen, sondern alle darauffolgenden.

<pre>pre ~ p {color: green;}</pre>
<p>Dieser Paragraph wird grün, da es einem PRE folgt.</p>
<p>Auch dieser Paragraph wird grün.</p>
<div>
	<p>Dieser Paragraph wird nicht angesprochen, da er in einem DIV verschachtelt ist.</p>
</div>
Teilen