plugin_admin_common($action, $admin, $plugin)

* { margin: 0; padding: 0;}

Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab.

a { color: red; }
ul { margin-left: 0; }

Der Typ-Selektor zielt auf alle Elemente des angegebenen Typs, unabhängig von ID oder Klasse.

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

div#container > ul { border: 1px solid black;}

Der Kind-Selektor zielt nur auf direkte Kinder und nicht auf Kindeskinder usw.

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.

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.

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.

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.

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.

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.

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>

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.

li:nth-last-child(2) { color: red;}

Ein E Element, das n-te Kind seines Elternteils, beginnend mit dem letzten Element.

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.

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.

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.

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.

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.

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>

ul + p { color: red;}

Der Selektor für die unmittelbaren Nachbaren ziel nur auf das Element, dem das erstel Element unmittelbar vorausgeht.

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.

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.

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.

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.

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.

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.

a[data-filetype="image"] {color: red;}

Entspricht jedem E-Element, dessen "foo"-Attributwert an bliebiger Stelle im String mindestens ein mal "bar" enthält.

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.

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.

input#myid, #container { margin: auto;}

Das Hash-Symbol vor einem Selektor: alle ID mit dem Namen des Selektors.

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: https://lembach-cmsimple.de

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)

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.

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 { 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