## CSS Selektoren

## Element-Selektor

**Syntax:** `element`

```css
p {
    line-height: 1.5;
}
```

**Wirkung:** Alle Elemente dieses Typs werden ausgewählt



## Klassen-Selektor

**Syntax:** `.klasse`

```css
.reaktor-karte {
    background: white;
    border: 1px solid red;
}
```

**Wirkung:** Alle Elemente mit dieser Klasse werden ausgewählt




## ID-Selektor

**Syntax:** `#id`

```css
#hauptbereich {
    max-width: 960px;
}
```

**Wirkung:** Das Element mit der ID wird ausgewählt



# Verschachteltre Selektoren
**Syntax:** `A B`

**Wirkung:** Alle B innerhalb von A werden ausgewählt, egal wie tief sie verschachtelt sind

```css 
nav a {
    color: yellow;
}
```

## Kindselektor

**Syntax:** `A > B`

**Wirkung:** Nur direkte Kinder von A werden ausgewählt

```css 
header > h2 {
    margin: 0;
}
```

**Wichtig:** `>` ist strenger als das Leerzeichen


## Gruppierte Selektoren

**Syntax:** `A, B, C`

```
h1, h2, h3 {
    color: #ff00ff;
}
```


## Attributselektoren 

**Syntax:** `[attr]`

```css
input[required] {
    border-color: red;
}
```

**Wirkung:** Alle Pflichtfelder im Formular bekommen eine deutliche Markierung

### Exakter Wert

```css
input[type="submit"] {
    background: #00ffaa;
}

**Wirkung:** Nur die Senden-Buttons werden speziell gestaltet
```

## Teiltreffer

**Syntax**: `[attr*="teil"]`

```css
[class*="karte"] {
    border-radius: 8px;
}
```

**Wirkung:** Alles, was im Klassennamen `karte` enthält wird als Karte behandelt und gestaltet


## Pseudo-Klassen

### Hover

**Syntax:** `:hover`

```css
a:hover {
    text-decoration: underline;
}
```
**Wirkung:** Links reagieren, wenn man mit der Maus drüberfährt

### Focus

**Syntax:** `:focus`

```css 
input:focus {
    outline: 2px solid #003366;
}
```

**Wirkung:** Das *aktive* Eingabefeld ist sofort sichtbar


## Struktur-Pseudo-Klassen

```css
table tr:nth-child(even) {
    background: lightyellow;
}
```

**Wirkung:** Die Tabelle wird leichter lesbar durch abwechselnde Zeilenfarben

## Pseudo-Elemente

### `::before` und `::after`

```
.warnung::before {
    content: "⚠ ";
}
```

**Wirkung:**: Vor jede Warnung kommt automatisch ein Symbol.


## Spezifität

### Grundidee

Wenn mehrere Regeln passen, gewinnt meist die spezielle Regel.

Reihenfolge grob:

- Element
- Klasse
- ID 
- Inline Style

```css
p { color: black; }
.status p { color: blue; }
#leitstand p { color: green; }

```

**Wirkung:** Ein Absatz im Leitstand ist stärker geregelt als ein normaler Absatz