WebTech - Wolf 9

• steht im CSS vor den gewungenen Klammern
• Wenn mehrere Selektoren die gleichen Eigenschaften erhalten sollen, notiert man die Selektoren nacheinander und trennt sie mit Komma.
• es wird also zwischen Groß- und Kleinschreibung unterschieden.
• immer anhand ihrer Funktion und nicht anhand ihres Aussehens benennen.

Arten:

• Einfache Selektoren
• Kombinatoren: zwei Selektoren werden mit Operator oder Leerraum verkettet

• element {...}
• HTML-Element mit dem Namen element
• <element>

• .klname
• Element mit der Klasse klname
• <p class="klname">
• der Name sollte Sinn ergeben

• #elemid
• Element mit der ID elemid
• <p id="elemid">
• der Name sollte Sinn ergeben
• kombinierte Selektoren bspw. Klasse und ID machen wenig sinn, da ID eindeutig

• *
• jedes Element
• <p>
• kann verwendet werden um alle Elemente auszuwählen * { }
• oder alle Elemente in einem Element. main * { }

wenn man generell im CSS ein Attribut ansprechen möchte: 

• jedes Element, bei dem das Attribut vorhanden ist: [attributname] {...}

Nachfolgende Beispiele anhand des Attributs title:

[title=wert]   { }

• Alle Attribute, bei denen das Attribut (der title) 100% diesem Wert entspricht

[title~=wert] { }

• Alle Attribute, bei denen der das alleinstehende Wort "wert" enthalten ist
• bspw. <div title="abc wert xyz"

[title^=wert]  { }

• jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt
• <elem title="werter">

[title$=wert] { }

• jedes Element, bei dem das Attribut attr mit der Textfolge wert endet
• <elem title="endwert">

[title*=wert] { }

• jedes Element, bei dem das Attribut attr die Textfolge wert enthält
• <elem title="bewertung">

[title | = wert] { }

• Jedes Element, bie dem im Attribut der Wert am Anfang mit einem Bindestrich steht
• bspw. <div title="wert-xyz">

• Typselektor
• Klassenselektor
• ID-Selektor
• Universalselektor
• Attributselektor (3 Stück, Wert am Anfang, Ende, Mitte)

• Hierbei handelt es sich um Elemente, die nicht über gewöhnliche Selektoren erreicht werden können.

• Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt werden.