Attribut-Selektoren

Attribut-Selektor, unspezifisch (alle p mit einem title-Attribut)

p[title] {color: blue; }

Ich habe ein title-Attribut

Ich habe ein title-Attribut

Ich habe ein title-Attribut

Attribut-Selektor, mit spezifischem Attribut-Wert

p[title="Milka-Kuh"] {color: violett; }
p[title="Apfel"] {color: red; }
p[title="Gras"] {color: green; }

Ich habe das Attribut title="violett"

Ich habe das Attribut title="rot"

Ich habe das Attribut title="gruen"

Weiteres Beispiel

p[lang="EN"] {color: red; }
p[lang="DE"] {color: blue; }

English language

Deutsche Sprache

Kind-Selektoren

Stilregeln gelten für alle Elemente, die body als Parent haben.

body > * {
	border: 1px black dotted;
	padding: 10px;
	margin: 10px;	
}

article

Stilregeln gelten für alle Elemente, die article als Parent haben.

article > * {
	border: 1px red dotted;
	padding: 10px;
	margin: 10px;	
}

section

Stilregeln gelten nur für alle p-Elemente, die section als Parent haben.

section > p {
	color: #03F;
}

Absatz in section.

(Parent, hier unsichtbar)

Der n-te Kind-Selektor (child 1)

Nur der zweite in Bezug auf das Parent-Element, p:nth-child(4) {background-color:#FC3} (child 2)

Erster Absatz (child 3)

Zweiter Absatz (child 4)

Dritter Absatz

Vierter Absatz

Fünfter Absatz

(Parent, hier unsichtbar)

Gradzahlig in Bezug auf das Parent-Element, p:nth-child(2n) {background-color:#FC3}

Erster Absatz

Zweiter Absatz

Dritter Absatz

Vierter Absatz

Fünfter Absatz

(Parent, hier unsichtbar)

Ungradzahlig in Bezug auf das Parent-Element, p:nth-child(2n+1) {background-color:#FC3}

Erster Absatz

Zweiter Absatz

Dritter Absatz

Vierter Absatz

Fünfter Absatz

Geschwister-Selektor

Jeweils das erste p-Element, das auf h2 folgt, wird rot und fett gedruckt.

h2 + p {
	font-weight: bold;
	color: red;
	margin-bottom: 1em;
}

Überschrift 1, h2

Anreißer 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Überschrift 2, h2

Anreißer 2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Überschrift 3, h2

Anreißer 3: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Überschrift 4, h2

Anreißer 4: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Attribut-Selektoren

Attribut-Selektor, unspezifisch (alle p mit einem title-Attribut)

p[title] {color: blue; }

Attribut-Selektor, mit spezifischem Attribut-Wert

p[title="Milka-Kuh"] {color: violett; }
p[title="Apfel"] {color: red; }
p[title="Gras"] {color: green; }

Weiteres Beispiel

p[lang="EN"] {color: red; }
p[lang="DE"] {color: blue; }

Kind-Selektoren

article

section

Der n-te Kind-Selektor (child 1)

Nur der zweite in Bezug auf das Parent-Element, p:nth-child(4) {background-color:#FC3} (child 2)

Gradzahlig in Bezug auf das Parent-Element, p:nth-child(2n) {background-color:#FC3}

Ungradzahlig in Bezug auf das Parent-Element, p:nth-child(2n+1) {background-color:#FC3}

Geschwister-Selektor

Überschrift 1, h2

Überschrift 2, h2

Überschrift 3, h2

Überschrift 4, h2

Generated Content

p:before {content: "Bitte hier drücken --> "; }

p:before { content:URL(pfeil.png)}

p:before { content:"\2192"}

Unicode-Zeichen in CSS verwenden

Zeichen \258a

Zeichen \258e

Zeichen \25a0

Zeichen \25a2

Zeichen \25aa

Zeichen \27a7

Zeichen \2600

Zeichen \2601

Zeichen \2602

Zeichen \260e

Zeichen \2794

Zeichen \279e

Attribut-Selektoren

Attribut-Selektor, unspezifisch (alle p mit einem title-Attribut)

p[title] {color: blue; }

Attribut-Selektor, mit spezifischem Attribut-Wert

p[title="Milka-Kuh"] {color: violett; } p[title="Apfel"] {color: red; } p[title="Gras"] {color: green; }

Weiteres Beispiel

p[lang="EN"] {color: red; } p[lang="DE"] {color: blue; }

article

section

Der n-te Kind-Selektor (child 1)

Nur der zweite in Bezug auf das Parent-Element, p:nth-child(4) {background-color:#FC3} (child 2)

Gradzahlig in Bezug auf das Parent-Element, p:nth-child(2n) {background-color:#FC3}

Ungradzahlig in Bezug auf das Parent-Element, p:nth-child(2n+1) {background-color:#FC3}

Geschwister-Selektor

Überschrift 1, h2

Überschrift 2, h2

Überschrift 3, h2

Überschrift 4, h2

Generated Content

p:before {content: "Bitte hier drücken --> "; }

p:before { content:URL(pfeil.png)}

p:before { content:"\2192"}

Unicode-Zeichen in CSS verwenden

Zeichen \258a

Zeichen \258e

Zeichen \25a0

Zeichen \25a2

Zeichen \25aa

Zeichen \27a7

Zeichen \2600

Zeichen \2601

Zeichen \2602

Zeichen \260e

Zeichen \2794

Zeichen \279e

p[title="Milka-Kuh"] {color: violett; }
p[title="Apfel"] {color: red; }
p[title="Gras"] {color: green; }

p[lang="EN"] {color: red; }
p[lang="DE"] {color: blue; }