# CSS:

## der Unterschied zwischen "#out>div" und "#out div"

Gerne! Der Unterschied zwischen den CSS-Selektoren **`#out > div`** und **`#out div`** liegt in der Art der Auswahl der Elemente, die sie ansprechen:

- **`#out > div`**Dieser Selektor wählt **alle `div`-Elemente aus, die direkte Kinder** des Elements mit der ID `out` sind.Beispiel:

  ```html
  <div id="out">
    <div>Direktes Kind (wird ausgewählt)</div>
    <section>
      <div>Kein direktes Kind, sondern Enkel (wird nicht ausgewählt)</div>
    </section>
  </div>
  ```
- **`#out div`**
  Dieser Selektor wählt **alle `div`-Elemente aus, die Nachfahren** (also Kinder, Enkel, Urenkel usw.) des Elements mit der ID `out` sind, unabhängig von der Tiefe.
  Beispiel:

  ```html
  <div id="out">
    <div>Direktes Kind (wird ausgewählt)</div>
    <section>
      <div>Enkel (wird auch ausgewählt)</div>
    </section>
  </div>
  ```

### Zusammenfassung:

| Selektor       | Auswahlkriterium                                           | Beispielhafte Auswahl                     |
| -------------- | ---------------------------------------------------------- | ----------------------------------------- |
| `#out > div` | Nur direkte Kinder `div` von `#out`                    | Nur `div`-Elemente eine Ebene tiefer    |
| `#out div`   | Alle `div`-Elemente innerhalb von `#out` (alle Ebenen) | Alle `div`, egal wie tief verschachtelt |

Das **`>`** ist also ein **Kind-Selektor**, während das Leerzeichen ein **Nachfahrten-Selektor** ist.

Falls du möchtest, kann ich dir auch Beispiele mit CSS-Regeln geben!

# jQuery:

## get class (wie lese ich eine Klasse aus?)

In jQuery kannst du die Klasse(n) eines Elements mit der Methode **`.attr('class')`** oder **`.prop('className')`** auslesen. Am gebräuchlichsten und einfachsten ist:

```javascript
var className = $('#elementID').attr('class');
console.log(className);
```

Das gibt dir den kompletten Wert des `class`-Attributs als String zurück, also alle Klassen, die das Element hat, z. B. `"btn primary large"`.

### Beispiel:

```html
<div id="myDiv" class="container highlight"></div>
```

```javascript
var classes = $('#myDiv').attr('class');
console.log(classes);  // Ausgabe: "container highlight"
```

### Alternative: `.prop('className')`

```javascript
var classes = $('#myDiv').prop('className');
console.log(classes);
```

Beide funktionieren ähnlich, `.attr('class')` ist aber üblicher.

---

Falls du nur prüfen möchtest, ob ein Element eine bestimmte Klasse hat, kannst du auch `.hasClass('klassenname')` verwenden.

Wenn du möchtest, kann ich dir Beispiele für das Hinzufügen, Entfernen oder Prüfen von Klassen geben.