| Muster |
Bedeutung |
ext. Beschreibung ⇒ URL |
| * |
* { margin: 0; padding: 0;}
Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab.
|
Universal selector |
| E |
a { color: red; }
ul { margin-left: 0; }
Der Typ-Selektor zielt auf alle Elemente des angegebenen Typs, unabhängig von ID oder Klasse.
|
Type selectors |
| E F |
li a { text-decoration: none;}
Dieser Selector ist der Nachfahre Selektor. Er zielt auf jedes gleichnamige Element innerhalb des ersten Elementes. Das Umschließt Kinder, Enkel, Urenkel ...
|
Descendant selectors |
| E > F |
div#container > ul { border: 1px solid black;}
Der Kind-Selektor zielt nur auf direkte Kinder und nicht auf Kindeskinder usw.
|
Child selectors |
| E:root |
Die Pseudoklasse :root steht für ein Element, das die Wurzel des Dokuments ist. In HTML 4 ist dies immer das HTML-Element. |
Structural pseudo-classes |
| E:first-child |
ul li:first-child { border-top: none;}
Ein E Element, erstes Kind seines Elternteils. Diese strukturelle Pseudoklasse ermöglicht es, nur das erste untergeordnete Element des übergeordneten Elements des Elements anzusprechen.
|
The :first-child pseudo-class |
| E:last-child |
ul > li:last-child { color: green;}
Ein E-Element, letztes Kind seines Elternteils. Als Gegenteil von first-child, zielt last-child auf das letzte Element des übergeordneten Elements des Elements ab.
|
Structural pseudo-classes |
| E:first-of-type |
li:first-of-type { font-weight: bold}
Ein E-Element, erstes Geschwisterteil seines Typs. Diese strukturelle Pseudoklasse ermöglicht es, nur das erste unter gleichen Elementen anzusprechen.
|
Structural pseudo-classes |
| E:last-of-type |
li:last-of-type { color: red;}
Ein E-Element, letztes Geschwisterteil seines Typs. Als Gegenteil zu first-of-type, zielt last-of-type aud das letzte unter gleichen Elementen ab.
|
Structural pseudo-classes |
| E:only-child |
div p:only-child { color: red;}
Ein E-Element, einziges Kind seines Elternteils. Es ermöglicht, Elemente anzusprechen, die das einzige untergeordnete Element des übergeordneten Elements sind.
|
Structural pseudo-classes |
| E:only-of-type |
li:only-of-type { font-weight: bold;}
Ein E-Element, einziges Geschwisterteil seines Typs. Es zielt auf Elemente ab, die keine Geschwister in seinem übergeordneten Container haben.
|
Structural pseudo-classes |
| E:empty |
p:empty { border-bottom: 1px dotted lightgray;}
Ein E-Element, das keine Kinder hat (einschließlich Textknoten) und leer ist. Also z. B. <p></p>
|
Structural pseudo-classes |
| E:nth-child(n) |
li:nth-child(3) { color: red;}
li:nth-child(3n) { color: red;}
Ein E-Element, das n-te Kind seines Elternteils, beginnend mit dem ersten Element. Die Zählung beginnt bei 1!. Im zweiten Beispiel wird jedes dritte Element angesprochen.
|
Structural pseudo-classes |
| E:nth-last-child(n) |
li:nth-last-child(2) { color: red;}
Ein E Element, das n-te Kind seines Elternteils, beginnend mit dem letzten Element.
|
Structural pseudo-classes |
| E:nth-of-type(n) |
ul:nth-of-type(3) { border: 1px solid black;}
Ein E Element, das n-te Geschwisterteil seines Typs, vom ersten an gerechnet. Im Beispiel wäre das das dritte ul-Element.
|
Structural pseudo-classes |
| E:nth-last-of-type(n) |
ul:nth-last-of-type(3) { border: 1px solid black;}
Ein E-Element, das n-te Geschwister seines Typs, vom letzten an gerechnet. Im Beispiel wäre das das drittletzte ul-Element.
|
Structural pseudo-classes |
E:link
E:visited |
a:link { color: red; }
a:visted { color: purple; }
Die Pseudoklasse :link selektiert alle Anker-Tags, die noch nicht angeklickt wurden. Und :visited selektiert alle schon angeklickten (besuchten) Anker-Tags.
|
The link pseudo-classes |
E:aktiv
E:hover
E:focus |
div:aktiv { background: #d3d3d3;}
div:hover { background: #e3e3e3;}
div:focus{ border-color: #f3f3f3;}
Die Pseudoklassen :aktiv und :hover werden z. B. in Menüs eine Website eingesetzt. Der Anker der aktuell angezeigten Seite ist :aktiv. Der Anker unter dem Mauszeiger ist :hover.
Springt man in einem Formular z. B. mit dem Tabulator von Eingabe zu Eingabe, hat das so angewählte <form> - Tag den :focus.
|
The dynamic pseudo-classes |
| E:lang(c) |
html:lang(fr-be) {color: blue}
html:lang(de) {color: red}
:lang(fr-be) > q {background: lightblue;}
:lang(de) > q {background: lightgray;}
Die ersten beiden vorstehenden Selektoren stehen für ein HTML-Dokument, das in belgischem Französisch oder Deutsch verfasst ist. Die beiden nächsten Selektoren stehen für q-Zitate in einem beliebigen Element in belgischem Französisch oder Deutsch.
|
The :lang() pseudo-class |
E[lang|=
"de"] |
html:lang|="fr" {color: blue}
Der Unterschied zwischen :lang(C) und dem '|='-Operator besteht darin, dass der '|='-Operator nur einen Vergleich mit einem bestimmten Attribut des Elements durchführt, während die :lang(C)-Pseudoklasse das Wissen der UA über die Semantik des Dokuments verwendet, um den Vergleich durchzuführen.
In diesem HTML-Beispiel stimmt nur der BODY mit [lang|=fr] überein (weil er ein LANG-Attribut hat), aber sowohl der BODY als auch das P stimmen mit :lang(fr) überein (weil beide auf Französisch sind). Das P passt nicht zu [lang|=fr], weil es kein LANG-Attribut hat.
<body lang=fr>
<p>Je suis français.</p>
</body>
|
Attribute selectors |
| E + F |
ul + p { color: red;}
Der Selektor für die unmittelbaren Nachbaren ziel nur auf das Element, dem das erstel Element unmittelbar vorausgeht.
|
Adjacent selectors |
| E ~ F |
ul ~ p { color: red;}
Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng. Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der frühere Selektor unmittelbar vorausgeht, ist dieses Element allgemeiner. Es wählt unter Bezugnahme auf obiges Beispiel alle p-Elemente aus, solange sie einem ul folgen.
|
Subsequent-sibling combinator |
| E[foo] |
a[title] { color: green;}
Entspricht jedem E-Element mit dem Attributsatz "foo" (unabhängig vom Wert).
Im obigen Beispiel ziel der Selektor nur auf die Anker-Tags die ein title Attribut haben.
|
Attribute selectors |
E[foo=
"warning"] |
input[value="wertangabe"] { color: blue;}
a[href="https://net.tutsplus.com"] { color: #1f6053; /* nettuts green */}
Entspricht jedem E-Element, dessen "foo"-Attributwert genau gleich "warning" ist.
|
Attribute selectors |
| E[foo*="xyz"] |
a[href*="cmsimple"] { color: #1f6053; /* cmsimple green */}
Der Stern gibt an, dass der folgende Wert irgendwo im Wert des Attributs erscheinen muss. Auf diese Weise deckt dieser Selektor im Beispiel alle Links ab, deren Adresse irgendwo das Wort cmsimple enthält.
|
Attribute selectors |
| E[foo^="bar"] |
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}
Das Karat-Symbol (^) bezeichnet den Anfang des Wertes des Attributes foo, der zum Vergleich herangezogen wird. Er wird mit dem Parameter in den "" verglichen.
Hier im Beispiel wird also der Anfang des Wertes des Attributes href mit "http" verglichen. Bei Übereinstimmung wird die Formatauszeichnung aktiv. Es sind also alle externen Links (egal ob http oder https) erfasst.
|
Attribute selectors |
| E[foo$="bar"] |
a[href$=".jpg"] { color: red;}
Hier ist es umgekehrt wie zuvor. Das Dollarzeichen bezeichnet das Ende des Wertes des Attributes.
Hier im Beispiel werden also alle Links zu JPG-Bildern selektiert.
|
|
| E[foo*="bar"] |
a[data-filetype="image"] {color: red;}
Entspricht jedem E-Element, dessen "foo"-Attributwert an bliebiger Stelle im String mindestens ein mal "bar" enthält.
|
|
E[foo~=
"Warnung"] |
a[data-info~="external"] { color: red;}
a[data-info~="image"] { border: 1px solid black;}
Entspricht jedem E-Element, dessen "foo"-Attributwert eine Liste von durch Leerzeichen getrennten Werten ist, von denen einer genau "warning" entspricht.
|
Attribute selectors |
div.class
_selector
or
.class
_selector |
p.absatz, .erorr{ color: red;}
Dies ist ein class-Selektor. Der Unterschied zwischen id und class besteht darin, dass Sie mit letzteren mehrere Elemente ansprechen können. Verwenden Sie Klassen, wenn das Styling auf eine Gruppe von Elementen angewendet werden soll. Alternativ können Sie ids verwenden, um eine Nadel im Heuhaufen zu finden, und nur dieses bestimmte Element formatieren.
|
Class selectors |
E#myid
or
#myid |
input#myid, #container { margin: auto;}
Das Hash-Symbol vor einem Selektor: alle ID mit dem Namen des Selektors.
|
ID selectors |
| E:not(foo) |
a[href^="http"]:not([target="_blank"]):after { content: "\00a0\f045"; font: 0.889em FontAwesome; opacity: .35;}
Die Negations-Pseudoklasse :not(X) ist eine funktionale Notation, die einen einfachen Selektor (außer der Negations-Pseudoklasse selbst) als Argument verwendet. Sie stellt ein Element dar, das nicht durch ihr Argument repräsentiert wird.
Negationen dürfen nicht verschachtelt werden; :not(:not(...)) ist ungültig. Da Pseudo-Elemente keine einfachen Selektoren sind, sind sie auch kein gültiges Argument für :not().
Hier in diesen Template wird der Link ohne target="_blank"-Attribut so dargestellt: https://lembach-cmsimple.de
Der gleiche Link mit dem target="_blank"-Attribut wird so dargestellt: htths://lembach-cmsimple.de
|
Negation pseudo-class |
| E:checked |
input[type=radio]:checked {border: 1px solid blue;}
Die Pseudoklasse selektiert ein Element E der Benutzeroberfläche, das angekreuzt/ausgeählt wurde (z. B. eine Optionsschaltfläche oder ein Kontrollkästchen)
|
The UI element states pseudo-classes |
E:enabled
E:disabled |
input:enabled { color: #22AA22;}
input:disabled { color: #D9D9D9;}
<form action="url_of_form">
<label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="button" value="Submit" />
</form>
Ein Element E der Benutzeroberfläche, das aktiviert oder deaktiviert ist.
Die :enabled CSS Pseudoklasse repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.
|
The UI element states pseudo-classes |
E:after
E:before |
a[target="_blank"]::after { content: "\00a0\f08e"; font: 0.889em FontAwesome; opacity: .75;}
Diese Pseudoklassen fügen nach oder vor dem Element (durchaus mit zusätzlichen Selektoren wie z. B. [attribut="wert"]) Inhalt ein.
|
The ::before pseudo-element
The ::after pseudo-element
|
p::first-line
p::first-letter
|
p::first-line { font-weight: bold; font-size: 1.2em;}
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}
Diese Pseudoelemente müssen auf Elemente auf Blockebene angewendet werden, um wirksam zu werden! Die angegebene Formatierung wirkt dann auf die erste Zeile bzw. den ersten Buchstaben des Absatzes.
Die folgenden CSS-Eigenschaften gelten für ein ::first-line-Pseudoelement: Schrifteigenschaften, Farbeigenschaften, Hintergrundeigenschaften, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform', 'line-height'.
|
The ::first-line pseudo-element
The ::first-letter pseudo-element
|
