Wie erwische ich im CSS
die richtigen Elemente möglichst simpel?


Selektoren Kombination



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

Kombination mit Selektoren

CSSBedeutung
p {...}Das Element wird ausgewählt und bekommt die Eigenschaften.
p.red {...}Werden 2 Elemente ohne Leerzeichen zusammengeschrieben, dann werden sie somit näher bestimmt. Z.B. p MIT der Klasse red. Nur diese bekommen die Eigenschaften.
nav * {...}Der Stern (*) wählt alle Elemente aus. Kann auf die Kinder-Elemente angewendet werden. Z.B. wähle alle Elemente im NAV aus.
h1, h2, h3 {...}Wählt die mit dem Komma zusammengefassten Elemente aus. Alle bekommen gleichzeitig die bestimmten Eigenschaften.
h1 span {...}Wählt die entsprechenden Elemente aus, welche Kinder-Elemente des ersteren sind. Z.B. span die Kinder und Kindeskinder von h1 sind. Durch das Leerzeichen werden alle Kindeskinder mit ausgewählt.
div>p {...}Wählt die entsprechenden Elemente aus, welche direkte Kinder-Elemente des ersteren sind. Z.B. span die direkte Kinder von h1 sind. Durch das Größer als Zeichen ">" werden nur die direkten Kinder und nicht die Kindes-Kinder ausgewählt.
h1+p {...}Selektiert nur die Geschwister-Elemente die direkt nach dem ersteren kommen. Z.B. nur die p Elemente, welche direkt nach h1 kommen.
h1~p {...}Wählt alle Geschwister-Elemente aus, welche folgen. Z.B. alle p die nach einem h1 kommen.

frageantwort
Was ist der unterschied zwischen h1 und h2?Ganz einfach! h1 und h2 sind Ebenen der Überschriften.
Was ist der Unterschied zwischen nav h1 und nav>h1 Bei nav h1 kann h1 auch ein Kindeskind sein, bei nav>h1 wird es nur angesprochen wenn es ein direktes Kind ist.
Welchen Vorteil bringt die Hintereinaderreihung von Elementen durch Kommata?Es erspart Zeit und Arbeit in großen Dokumenten. Änderungen sind später leichter durchzuführen.
Wie trennt man im CSS verschiedene Selektoren?Mit einem Komma
Welche Selektoren können kombiniert werden ?Jedes Element
Was bedeutet das Sternchen (*) bei "nav *"?
Es wählt alle Elemente im nav aus.
Was ist der Unterschied zwischen h1+p und h1-p?Bei h1+p werden nur Geschwister Elemente selektiert, die direkt nach dem ersten kommen
Bei h1-p werden alle Geschwister Elemente ausgewählt die folgen
Wie macht man alle article rot?article {background: #900;}
Was bewirkt das Komma bei h1,h2,h3?Dabei werden alle Elemente die mit dem Komma verbunden sind ausgewählt.

#id und .class



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

ID und Class im HTML

AttributBedeutung
id="..."ID definiert und identifiziert ein Element exakt und kann deswegen auf der Webseite nur einmal benutzt werden. Kann auf jedes Element angewendet werden. ID können direkt verlinkt werden.
class="..."Klasse definiert Eigenschaften die mehrfach genutzt werden. Kann auf jedes Element angewendet werden. Es können auch mehrere Klassen gleichzeitig bei einem Element zugeordnet sein. Gestaltung sollte über Klassen und nicht über ID umgesetzt werden.
style ="..."Alle CSS Eigenschaften können auch direkt einem Element als Attribut zugeordnet werden. Dies sollte man jedoch zugunsten einer globalen Gestaltung mit einer CSS möglichst vermeiden. Einige Javascript Effekte, z. B. Parallax Effekte, basieren jedoch auf der Echtzeit-Veränderung des einzelnen STYLE Attribut.

ID und Class im CSS

CSSBedeutung
#idID identifizieren Elemente eindeutig. Eine ID kann im HTML Dokument nur einmal benutzt werden. Die ID wird im HTML als Attribut zugeordnet. ID bündeln zwar beliebige CSS Eigenschaften aber im Sinn einer modulorientierten Konzeption ist das Styling ausschließlich über CLASS empfohlen. Die ID fungiert bei Bedarf als Identifikator.
.classCSS Klassen bündeln beliebige CSS Eigenschaften und können mehrfach benutzt werden. Die im CSS definierte Class muss im HTML als Attribut zugeordnet werden. Im Sinn einer modulorientierten Konzeption ist das Styling ausschließlich über CLASS empfohlen. Die Namensgebung sollte aussagekräftig sein. Auf ein Element können mehrere CLASS angewendet werden.

frageantwort
Warum würde man einem "Shoppingcart"-button eher eine ID als eine Class zuweisen ?Weil der Button höchst wahrscheinlich nur genau einmal vorkommt und man ihn so individuell definieren kann.
Mit welchem Zeichen legt man im CSS eine ID fest?#
Ein Link soll genau auf eine Überschrift verlinken. Dabei soll die Seite auch an die Stelle gesorgt werden. Wie geht das?Indem die Überschrift eine ID bekommt. Der Link bekommt dies als Zusatz. Z.B. <a href="har.html#ID">
Was ist der unterschied zwischen Classes und IDsID können nur einmal benutzt werden und Classen können mehrmals benutzt werden.
Welches der beiden Attribute kann mehrfach verwendet werden?Das Attribut "Class"
Mit welchen Zeichen zeigt man im CSS eine Klasse an?.
Was bündelt beliebige CSS Eigenschaften und kann nur einmal benutzt werden?#id

Attribute selektieren



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

Attribute selektieren

CSSBedeutung
[...] [title]Wählt alle Elemente mit diesem Atrribut aus. Z.B. alle Elemente mit title.
[...=...]Wählt alle Elemente mit diesem Atrribut und exakt diesem Wert aus. Z.B. alle Elemente mit title=Arnold: [title=Arnold].
[...~=...]Die tilde (~) wählt alle Elemente mit diesem Atrribut aus, wenn sie im Titel den Wert haben. Dabei müssen die Wörter durch Leerraum getrennt sein. Z.B. alle Elemente bei denen im Titel das Wort Arnold vorkommt: [title~=Arnold]. Praktisch bei CSS-Klassen.
[...|=...]Wählt alle Elemente aus die mit einem bestimmten Attribut und Wert beginnen. Der Wert kann außedem mit Bindestrich (-) weitere Inhalte haben. Z.B. mit dem titel Arnold-: [title|=Arnold]. Praktisch bei CSS-Klassen.
[...^=...]Wählt alle Elemente aus die mit einem bestimmten Attribut beginnen. Z.B. mit der ID "Table-": [id^="Table-"]. Praktisch bei CSS-Klassen.
[...$=...]Wählt alle Elemente aus, die auf ein bestimmtes Attribut enden. Z.B. hier alle CSS Klassen die auf retina enden: [class$=retina]. Praktisch bei CSS-Klassen.
[...*=...]Wählt alle Elemente aus die einen bestimmten Wert enthalten. Z.B. alle Mail-Links die auf @absks.de verweisen: a [href*= "@absks."].

frageantwort
Welchem Element können sinnvollerweise :target, :link, :hover und :visited zugeordnet werden?Der Anker-Element <a> - Nur es kann verlinken.
Welchen Vorteil bringt :visited?Es zeigt dem Nutzer ob er schon einmal auf den Link geklickt hat.

Strukturelle :pseudo-classes



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

Strukturelle :pseudo-classes

CSSBedeutung
:emptyElemente ohne Inhalt.
:first-childDas erste Kinder-Element wird ausgewählt.
:first-of-typeDass erste Element seiner Art wird ausgewählt.
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:lang(...)Auswahl von Elementen die mit der definierten Sprache markiert sind.
:last-childDas letzte Kind-Element.
:last-of-typeDas letzte Element seiner Art.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:not(selector)Wählt alle Elemente aus, welche nicht zutreffen.
:nth-child(n)Wählt das n-te Kind-Element aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-last-child(n)Wählt das n-te-letzte Kind seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-last-of-type(n)Wählt das n-te-letzte Element seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:nth-of-type(n)Wählt das n-te Element seiner Art aus. Für n kann eine beliebige Zahl eingesetzt werden. Es können mit dem Wert ODD (Ungerade) und EVEN (Gerade) für n außerdem leicht wiederholende Muster von Eigenschaften erzeugt werden.
:only-of-typeWählt alle Einzel-Elemente dieser Art aus.
:only-childWählt alle Einzelkinder aus.
:rootWählt das erste Eltern-Element aus. Das ist das HTML Element.

frageantwort
Wie fügt man einen roten Hover-Effekt auf die Schriftfarbe für die Zahlen bei article ein?article:hover{color:red;}
Was bewirkt :hover?Bei Kontakt mit dem Mauszeiger veränderte sich das Ausehen.
Was ist der Unterschied zwischen :last-child und :last-of-type ?:last-child ist das letzte Kind-Element und :last-of-type ist das letzte Element seiner Art.
Wie wählt man das Eltern-Element aus?:root

::pseudo-elements



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

::pseudo-elemente

CSSBedeutung
::beforeFügt Inhalte vor dem Element ein. Z.B. ein Bild mit url("/bild.png"). Es können auch Attribute ausgelesen werden. Kann nicht auf leere Elemente wie IMG (Bild) oder BR (break) angewendet werden.
::afterFügt Inhalte nach dem Element ein.
::first-letterWählt den ersten Buchstaben des Elements aus.
::first-lineWählt die erste Zeile aus.
::selectionWählt die vom Benutzer durchgeführte Markierung mit der Maus.
::input-placeholder Platzhalter Text in Formular-Elementen.

Dynamische :pseudo-classes



Das Video ist eine Übersicht für diesen Bereich und zeigt wie im CSS Elemente auswählen kann.

Dynamische :pseudo-classes

CSSBedeutung
:activeAktiver Link, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist UND der Link geklickt wird, also währen die Maustaste gedrückt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:targetWählt alle diese Elemente, wenn Sie mittels eines Links auf ihre ID verlinkt und angeklickt sind. Klicke ich auf einen Link der auf eine ID verweist, dann erscheint diese ID als Anhang mit # in der Internetadresse oben im Browserfenster. Dieses so gewählte Element kann mit :TARGET gestaltet werden.
:visitedWählt besuchte Links aus, kann nur auf <a> angewendet werden. :VISITED wird erst aktiv, wenn auf <a> das Attribut HREF angewendet ist und der Link geklickt wurde. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.

frageantwort
Welchen Vorteil bringt :visited?Es zeigt dem Nutzer ob er schon einmal auf den Link geklickt hat.
Welchem Element können sinnvollerweise :target, :link, :hover und :visited zugeordnet werden?Der Anker-Element <a> - Nur es kann verlinken.


► Weitere Infos

Interne Quellen

Im Skript gibt es zu den Selektoren, Clasesses, ID, und Pseudo-Classes und -Elementen mehr Informationen und im Zusammenhang mit Tabellen, Links und Formularen typische Anwendungsmöglichkeiten.


Externe Quellen

Selectors Level 3

http://www.w3.org/TR/css3-selectors/

Original W3C CSS3 Recommendation für den Gebrauch der Selektoren, Pseudoclasses, Pseudoelemente, classes und ids.


Kompatibilität

http://caniuse.com/#search=before

Die Unterstützung durch die Browser ist sehr Gut. Am Beispiel des Pseudo-Element ::before wird dies aufgezeigt.


Selektoren auf selfhtml.wiki

http://wiki.selfhtml.org/(…)/CSS/Selektoren

Umfangreiche Erklärung für den Gebrauch der Selektoren, Pseudoclasses, Pseudoelemente, classes und ids.


Test my CSS

http://www.testmycss.com/

CSS Angaben sollten kein organisch gewachsendes, redudantes und sich selber überschreibendes Konstrukt sein. Oft wachsen sie jedoch in diese Richtung. Die Seite „Test my css“ prüft CSS auf die üblichen Fehler.


A Whole Bunch of Amazing Stuff

https://css-tricks.com/pseudo-element-roundup/

3D-Banner, Sternform, das Zeichen der (OL) geordnete Liste stylen, zentriert floaten … es gibt viele sehr schöne Beispiele für innovative Anwendungsmöglichkeitn in diesem Artikel in englischer Sprache.


CSS Pseudo-Elements Module Level 4

http://www.w3.org/TR/css-pseudo-4/

Offizielle Vorschau auf die kommenden Pseudoclasses und Elemente des CSS Modul 4