WebTech - Wolf 9

• 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.

:link

• ein unbesuchter Hyperlink

:visited

• ein besuchter Hyperlink

Generelle Infos:

• Es handelt sich hierbei um dynamische Pseudoklassen.
• Man muss bedenken, dass man hier zwischen Tablet, Phone und PC unterscheidet

:hover

• hold over, wenn der cursor sich darauf befindet

:active

• wenn ein Link/Element gerade aktiv ist

:focus

• wenn ein Link/Element mit dem Tabulator angewählt wird

:placeholder-shown

• wird bei input Elementen verwendet, spricht den paceholder-Text eines Elementes an

Diese werden bei Formularelementen verwendet:

:enabled

• anwählbar, freigegeben

:disabled

• nicht anwählbar, deaktiviert

:checked

• ausgewählt

Es können somit Elemente anhand der Position in der Dokumentstrukur angewählt werden. Dazu gehören:

• Wurzel des Dokuments (:root) und leere Elemente (:empty) --> CSS Level 2
• Struktur-Pseudoklassen für (normale) Kind-Elemente (:first-child, etc.)
• Struktur-Pseudoklassen für bestimmte Kind-Elemente (:nth-of-type, first-of-type etc.)

Allgemein:

• Man benötigt sie, um bestimmte Kind-Elemente in der HTML-Dokumentstruktur auszuwählen.
• Man nennt es auch Nachfahren-Element.
• Sie werden vorallem verwendet um  Tabellen einzufärben
• setzt man bspw. in die Klammern (odd) für ungerade Zahlen, werden alle ungeraden Spalten eingefärbt, analog (even) alle geraden

:first-child

• erstes Kind-Element eines HTML-Elements
• CSS Level 2

:last-child

• letztes Kind-Element eines HTML-Elements
• CSS Level 3

:nth-child()

• man wählt ddas n-te-Kinder-Element eines Eltern Elements aus
• CSS Level 3

:nth-last-child()

• vergleichbar funktioniert diese Pseudoklasse, nur dass die Aufzählung von hinten beginnt
• CSS Level 3

:only-child

• somit spricht man jene Elemente an, die als einzige Elemtente in einem Element enthalten sind.
• CSS Level 3

Dieser wird verwendet, wenn mehrere Elemente des gleichen Typs in einem Element enthalten sind. Somit kann man genau bestimmen, welche selektiert werden sollen:

:first-of-type oder :last-of-type

• ein Element, das das erste/letzte Kind-Element eines bestimmten Typs ist
• CSS Level 3

:nth-of-type(n)

• Ein Element, das das n-te gleichartige Kind-Element eines Eltern-Elements ist. Für n sind auch die Werte odd und even möglich (ungerade, gerade)
• CSS Level 3

:nth-last-of-type(n)

• die Zählung fängt von hinten an (Rest vgl. :nth-of type)
• CSS Level 3

:only-of-type

• Ein Element, wenn es das einzige Kind dieses Typs im Eltern-Element ist
• CSS Level 3

:

:lang(de)

• selektiert Elemente, bei denen die Sprache bspw. mit dem Attribut lang="de" versehen wurde
• CSS Level 2

:not(s)

• selektiert Elemente, auf die Selektor s nicht zutrifft

:matches(s1,s2,...)

• selektiert alle Elemente, auf die Selektor s1 und s2... zutreffen
• CSS Level 3

::first-letter 

• selektiert das erste Zeichen in einer Zeile

::first-line

• selektiert die erste Zeile in einem Absatz

::before

• fügt vor einem Element einen Inhalt ein und formatiert diesen auch

::after

• fügt nach einem Element einen Inhalt ein und formatiert diesen

E F (Nachfahrenselektor)

• F wird selektiert, wenn es ein Nachfahre eines Eltern-Elements ist.
• CSS Level 1

E > F (Kindselektor)

• F wird nur selektiert, wenn es ein direkter Nachfahre eines Eltern-Elements ist
• CSS Level 2

E + F (Nachbarselektor)

• F wird nur selektiert, wenn es direkt nach E vorkommt (im gleichen Eltern Element)
• CSS Level 2

E~F (Geschwisterselektor)

• F wird nur selektiert, wenn es nach E vorkommt (im gleichen Eltern-Element)
• CSS Level 3

Elemente sind auf der gleichen Ebene im Element.

• Verkettungen und Kombinatoren wenn möglich vermeiden
• Sinnlose Selektoren vermeiden (direkt ID ansprechen und nicht zusätzlich die Klasse)
• Achtung vor dem Universalselektor