Beispiel: CSS Selector

Beispiel: Jedem li eine andere Hintergrundfarbe

• Mo
• Di
• Mi
• Do
• Fr
• Sa
• So

li:nth-child(1) { background: hsl(30,60%,70%)}
li:nth-child(2) { background: hsl(70,60%,70%)}
li:nth-child(3) { background: hsl(90,60%,70%)}
li:nth-child(4) { background: hsl(120,60%,70%)}
li:nth-child(5) { background: hsl(150,60%,70%)}
li:nth-child(6) { background: hsl(180,60%,70%)}
li:nth-child(7) { background: hsl(210,60%,70%)}

Ab dem 6. Element und aufwärts

• Mo
• Di
• Mi
• Do
• Fr
• Sa
• So

li:nth-child(n+4) { border-left: 8px solid orchid;}

Vom letzten Element an aufwärts

• Mo
• Di
• Mi
• Do
• Fr
• Sa
• So

li:nth-child(-n+4) { border-left: 8px solid gold; border-right: 8px solid gold; }

Einen Bereich von bis auswählen

• Mo
• Di
• Mi
• Do
• Fr
• Sa
• So

li:nth-child(n+3):nth-child(-n+5) { background: ivory; color: black}

Attribut Selector

Element anhand eines HTML-Attributs aussuchen

.att1[title="Am Rand"] { border-bottom: 2px solid orchid }