Veit Schiele Communications

Veit Schiele Communications

Formate

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:10 © Veit Schiele Communications GmbH, 2007–2017
Element { CSS-Eigenschaft:Wert; …}

Klassenformate

Element.Klassenname { CSS-Eigenschaft:Wert; …}

.Klassenname { CSS-Eigenschaft:Wert; …}

Individualformate

#Name { CSS-Eigenschaft:Wert; …}

Element#Name { CSS-Eigenschaft:Wert; …}

Pseudoformate

Strukturelle Pseudoklassen

Element:first-line { CSS-Eigenschaft:Wert; …}
erste Zeile
Element:first-letter { CSS-Eigenschaft:Wert; …}
erster Buchstabe
Element:before { content:Wert; }

Vor dem Element einfügen.

Wird vom IE erst ab Version 8 unterstützt.

Element:after { content:Wert; }

nach dem Element einfügen.

Wird vom IE erst ab Version 8 unterstützt.

Element:nth-child(Xn+Y){CSS-Eigenschaft:Wert; …}

Jedes X te Element beginnend ab Y erhält die CSS-Eigenschaft.

Im folgenden eine Reihe von Beispielen, die das Prinzip erläutern:

Nur das fünfte Element
nth-child(5)
Alle bis auf die ersten fünf Elemente
nth-child(n+6)
Nur die ersten fünf Elemente
nth-child(-n+5)
Jedes vierte Element beginnend mit dem ersten
nth-child(4n+1)
Jedes zweite Element beginnend mit dem ersten
nth-child(odd)
Jedes zweite element beginnend mit dem zweiten
nth-child(even)
Das letzte Element
last-child
Das vorletzte Element
nth-last-child(2)

nth-child wird erst ab IE 9 unterstützt. Ggf. kann dann Selectivizr zur Unterstützung verwendet werden.

Element:nth-of-type(X){CSS-Eigenschaft:Wert; …}

Jedes X te Element vom Typ Element erhält die CSS-Eigenschaft.

Im folgenden eine Reihe von Beispielen, die das Prinzip erläutern:

Den zweiten Absatz
p:nth-of-type(2)
Den ersten Absatz
p:first-of-type
Den letzten Absatz
p:last-of-type
Den vorletzten Absatz
p:nth-last-of-type(2)
Den einzigen Absatz im Elternelement
p:only-of-type

nth-of-type wird erst ab IE 9 unterstützt. Ggf. kann jQuery extended selectors verwendet werden.

Pseudoklassen für Stadien von Elementen

:enabled { CSS-Eigenschaft:Wert; …}
Formularelement, das die Eingabe durch einen Nutzer erlaubt
:disabled { CSS-Eigenschaft:Wert; …}

Formularelement, das keine Eingabe durch einen Nutzer erlaubt, z.B.:

<body>
    <form>
        Telefon: <input type="tel"><br>
        E-Mail: <input type="email" disabled="disabled">
    </form>
</body>
input:enabled {
    background-color: white;
}
input:disabled {
    background-color: silver;
}
:checked { CSS-Eigenschaft:Wert; …}

Checkbox oder RadioButton, die aktiv sind, z.B.:

<body>
    <form>
        <input type="radio" id="m" name="gender" value="male">
        <label for="m">male</label>
        <input type="radio" id="f" name="gender" value="female">
        <label for="f">female</label>
    </form>
</body>
input + label {
    color: grey;
}
input:checked + label {
    color: black;
}

Negation

:not { CSS-Eigenschaft:Wert; …}
Element, das nicht durch den angegebenen Selektor gekennzeichnet ist.

Zum Weiterlesen

Weitere Informationen zu Pseudoformaten erhalten Sie unter CSS-Tricks: Meet the Pseudo Class Selectors.

Formate für verschachtelte Elemente

Element1 Element2 { CSS-Eigenschaft:Wert; …}
egal wie viele Ebenen Element2 unterhalb von Element1 liegt;
Element1 > Element2 { CSS-Eigenschaft:Wert; …}
nur wenn Element2 eine Ebene unterhalb von Element1 in der Elementstruktur liegt.
Element1 * Element2 { CSS-Eigenschaft:Wert; …}
wenn Element2 mindestens zwei Ebenen unterhalb von Element1 liegt.
Element1 + Element2 { CSS-Eigenschaft:Wert; …}
wenn Element2 auf gleicher Ebene liegt wie Element1 und unmittelbar nach Element1 folgt.

Attributbedingte Formate

Element[Attributname=Attributwert] { CSS-Eigenschaft:Wert; …}

z.B.:

a[href=index.html]
Element[Attributname~=Attributwert] { CSS-Eigenschaft:Wert; …}
a[alt~=index] für index.html, index.htm, index.shtml, index_html
p[lang|=en]
trifft z.B. auch auf Elemente mit <p lang="en-US">…</p> zu.

Mit solchen attributbedingten Formaten lassen sich komplexe Gestaltungsanweisungen erstellen z.B.:

a:after {
    content: " <" attr(href) "> " ;
}
a[href^="/"]:after {
    content: " <https://www.veit-schiele.de" attr(href) "> " ;
}
 a[href^="#"]:after,
 a[href^="javascript"]:after {
     content: "";
}

CSS3

In CSS3 sind drei weitere Selektoren für Attribute möglich:

a[href^='http:']
trifft auf alle Attribute zu, die mit http beginnen.
a[href$='.pdf']
trifft auf alle Attribute zu, die mit .pdf enden.
a[href*=index]
trifft auf alle Attribute zu, in denen mindestens einmal index vorkommt.

Browser-Support

BrowserChromeFirefoxIEOperaSafari
Version51.0793