CSS 3 Selektoren

Posted on by 2 comments

CSS 3 biete neue Mäglichkeiten für Webentwickler. Neben netten Effekten wie border-radius und transition die vor allem für neue graphische Mäglichkeiten jenseits von Javascript-Effekten und Pfuscharbeit mit unzähligen Bilddateien sorgen, gibt es auch neue Strukturelemente, die vor allem relativ zur Position im Quelltext sind.
Diese stellte in seinem Blog 456bereastreet.com vorgestellt. Diser Artikel orientiert sich in großen Teilen daran, ist Teilweise eine übersetzung des Artikels.

Selektor-Typ Beispiel Beschreibung
Selektiert Elemente mit Wortbestandteilen E[att^=”val”] Entspricht einem beliebigen E-Element, dessen att Attribut-Wert mit "val" beginnt.
Wortbestandteilen Attribut-Selektor E[att$=”val”] Entspricht einem beliebigen E-Element, dessen att Attributwert mit
"val" endet.
Wortbestandteilen Attribut-Selektor E[att*=”val”] Entspricht einem beliebigen E-Element, dessen att Attributwert die
Zeichenkette "val"enthält.
Strukturelle Pseudo-Klasse E:root Spielen Sie das Dokument das
Root-Objekt (Root: englisch für Wurzel). In HTML-Dokumenten ist das
Root-Element immer das HTML-Objekt.
Strukturelle Pseudo-Klasse E:nth-child(n) Entspricht einem beliebigen E-Element, das das n-te Kind (Unterelement)
seines Vaters ist.
Strukturelle Pseudo-Klasse E:nth-last-child(n) Entspricht einem beliebigen E-Element, das das n-te Kind (Unterelement)
seines Vaters ist, gerechnet ab dem letzten Kind.
Strukturelle Pseudo-Klasse E:nth-of-type(n) Entspricht einem beliebigen E-Element, das das n-te Geschwister seiner
Art ist.
Strukturelle Pseudo-Klasse E:nth-last-of-type(n) Entspricht einem beliebigen E-Element, das das n-te Geschwister seiner
Art ist, gerechnet ab dem letzten Geschwister.
Strukturelle Pseudo-Klasse E:last-child Entspricht einem beliebigen E-Element, das das letzte Kind seiner Eltern
ist.
Strukturelle Pseudo-Klasse E:first-of-type Entspricht einem beliebigen E-Element, das das erste seiner Geschwister
ist.
Strukturelle Pseudo-Klasse E:last-of-type Entspricht einem beliebigen E-Element, das letzte seiner Art Geschwister
ist.
Strukturelle Pseudo-Klasse E:only-child Entspricht einem beliebigen E-Element, das das einzige Kind seiner Eltern
ist.
Strukturelle Pseudo-Klasse E:only-of-type Entspricht einem beliebigen E-Element, das nur Geschwister von ihren Typ
besitzt.
Strukturelle Pseudo-Klasse E:empty Entspricht einem beliebigen E-Element, das keine Kinder hat
(einschließlich Text-Knoten).
Target Pseudo-Klasse E:target Aktive wenn das Element Target ist. #target
UI-Element Staaten Pseudo-Klasse E:enabled Entspricht einem beliebigen Element der Benutzeroberfläche (Formular) E,
das aktiviert ist.
UI-Element Staaten Pseudo-Klasse E:disabled Entspricht einem beliebigen Element der Benutzeroberfläche (Formular) E,
das deaktiviert ist.
UI-Element Staaten Pseudo-Klasse E:checked Entspricht einem beliebigen Element der Benutzeroberfläche (Formular) E,
das überprüft wird.
UI-Element Fragmente Pseudo-Element E::selection Entspricht dem Anteil eines Elements E, das derzeit ausgewählt oder durch
den Benutzer markiert ist.
Negation Pseudo-Klasse E:not(s) Entspricht einem beliebigen E-Element, das nicht dem Selektor
"s" entspricht.
Allgemeine Geschwister Kombinator E ~ F Entspricht einem beliebigen F-Element, dem ein E-Elemente vorangestellt
ist.
Legende:
E Beliebiges Element.
F Weiteres, beliebiges Element
s Beliebiger Selektor
n Beliebige, natürliche Zahl

Angenommen, Sie ein HTML-Dokument, das folgende Markup-Struktur besitzt:

<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

Durch die Verwendung der passenden Teilstring Attribut-Selektoren kann man die Strukturteile kombinieren.

Die folgende Regel wird die Hintergrundfarbe aller div -Elemente ändern, deren ID mit “NAV” beginnt:

div[id^="nav"] { background:#ff0; }


In diesem Fall betrifft der Selektoren die Elemente div#nav-primar und div#nav-secondary.

Für Elemente, deren ID “content” enthält, gilt die folgende Angabe:
div[id$="primary"] { background:#ff0; }

Diesmal Selektor wählt div#nav-primary und div#content-primary aus.

Die folgende Regel wird für alle div -Elemente gelten, deren ID den Strin “content” enthält.

div[id*="content"] { background:#ff0; }

Die Elemente, die von dieser Regel beeinträchtigt werden, sind div#content-primary, div#content-secondary und div#tertiary-content.

Der Substring Matching Attribut-Selektoren werden voll unterstützt von:
Opera 10.5+
Safari 4+
Chrome 8+
Mozilla Firefox 3.6+
Internet Explorer N/A – Vergesst den Müll einfach, ich entwickle nicht für IE, wenn ihr diesen ebenfalls vernachlässigt: Willkommen in der Welt der CSS 3 Selektoren.

Die :target Pseudoklasse

URLs mit # im Namen zum selektieren von Ankern oder IDs in der Seite. E:target wirkt sich wie :hover nur im selektierten Fall auf das Element aus. Wird die Seite also mit http://www.example.eg#content-primary geöffnet, so wirkt die folgende Regel auf das Element id="content".
div#content-primary:target { outline:1px solid #300; }
Die :target Pseudo-Klasse ist derzeit Safari und Chrome unterstützt, sowie von Browser basierend auf Mozilla Firefox und in Opera 11 und Internet Explorer 9 und ist in der Theorie vollständig einsetzbar.

Elemente der Nutzeroberfläche (UI) Status Pseudo-Klassen

Die :enabled und :disabled Pseudo-Klassen

Die :enabled und :disabled Pseudo-Klassen ermöglichen es Entwicklern, das Aussehen der Elemente der Benutzeroberfläche (Formular-Steuerelemente) zu verändern, abhängig davon, ob sie aktiviert oder deaktiviert sind.
Die folgenden Regeln geben zum Beispiel verschiedene Hintergrundfarben vor, je nachdem ob sie aktiviert oder deaktiviert sind:

input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

Die :checked Pseudo-Klasse

Die :checked Pseudo-Klasse wirkt sich auf aktivierte Checkboxen aus. Gegenstück ist das Element ohne Pseudoklasse.

input:checked { border:1px solid #090; }

Leider wird :checked nur von Opera und Mozilla basierten Browsern unterstützt.

Strukturelle Pseudo-Klassen

Die :root Pseudoklasse

:root wirkt sich immer auf das erste Element auf. Dies ist in der Regel .
:root { background:#ff0; }
html { background:#ff0; }

Diese Beiden Zeilen haben eine identische Wirkung, die erste ist jedoch nur für Mozilla und Safari interessant.

Die :nth-child() Pseudoklasse

p:nth-child(3) { color:#f00; }
Dieses Beispiel wirkt sich auf das dritte p Element in einer Reihe von gleichartigen Elementen. ein weiteres Beispiel ist eine Liste, in der zum Beispiel jeweils das erste Kind hervorgehoben werden soll.

Das ist in der Theorie noch einfach, die Anwendungsfelder sind jedoch enorm:

Die folgenden Regeln, betrifft alle p-Elemente, deren Index ein Vielfaches von 3 ist. b ist null und könnte weggelassen worden, wie in der zweiten Regel geschehen:
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

Wenn Sie eine Datentabelle mit 20 Reihen und haben wollen, dass jede ungerade Zeile ab der zehnten Zeile eine andere Hintergrundfarbe hat, können Sie mit dieser Regel erreichen:
tr:nth-child(2n+11) { background:#ff0; }
Da n bei 0 beginnt ist das erste betroffene Element das elfte Kind. Ebenfalls betroffen sind das 13., das 15., und so weiter.

Weitere Details finden sie unter: :nth-child() pseudo-class in den Spezifikationen zu CSS 3 auf der Seite der W3C.

Die :last-Kind Pseudo-Klasse

Die :last-child Pseudo-Klasse betrifft das letze Kind seiner Eltern. Es ist die gleiche wie :nth-last-child(1). Diese Regel passt auf alle p -Elemente dieses Elements sind das letzte Kind der Eltern:
p:last-child { background:#ff0; }
Dies funktioniert in Mozilla. Sonst niergends, bessere Alternative ist tr:nth-last-child(1) { background:#ff0; } (Wurde im Artikel nicht erzähnt, ist wie :nth-child(), beginnt aber beim letzen Element.)

Wir überspringen in dieser übersetzung einige weitere Pseudoklassen, da sie wenig neue Funktionen bieten und selbsterklärend sind. Ausgelassen werden :only-of-type, :first-of-type, p:last-of-type, :only-child
in der Englischen Originalfassung sind diese erläutert, ebenso in den Spezifikationen der W3C

Die :empty Pseudoklasse

Die :empty Pseudoklasse wirkt sich auf Elemente ohne Kinder aus.
<p></p>

Die :not(s) Pseudoklasse

Die :not(s) Pseudoklasse schließt alle Elemente aus, die NICHT s entsprechen.
:not(p) { border:1px solid #ccc; }

Alle elemente außer <p> besitzen einen 1px starken Rahmen

Wir lassen in der Übersetzung ::selection aus, da dieses Momentan nur von Safari unterstützt wird. Mozilla nutzt es nur mit einer entsprechenden Präfix. Dieser Teil wird zu einem späteren Zeitpunkt nachgereicht.

Das Geschwister-Band

Der Titel ist selbst gewählt, es gibt schlicht keinen deutschen Ausdruck dafür, Kombinator war mir zu neologistisch.
p ~ ul { background:#ff0; }
Folgt auf ein <p>- ein <ul>-Element, so wirkt diese Regel. Unterstützt wird diese Regel von Mozilla und Opera.
Genutzt werden kann diese Kombination auch geschachtelt.
div ~ div ~ p ~ ul

Fazit:

Zum Zeitpunkt der Veröffentlichung des Englischen Originaltextes hat sich die Lage stark verbessert – Sie bleibt dennoch katastrophal. Ohne den Internet Explorer wäre die Welt eine schöne, leider gibt es ihn. Bis die CSS 3 Selektoren einsatzfähig sind wird es noch lange dauern, doch sie werdern kommen. Apple, Mozilla und Opera halten die Flagge hoch empor und versprechen das blaue vom Himmel – Doch auch sie sind noch weit von der Perfektion entfernt. CSS 3 ist ein netter Experimentierkasten, einsetzbar nur für Feinde des Internet Explorers und Menschen, die einbußen akzeptieren. Die Zukunft kann kommen, die Webentwickler warten.

Browser-Emprehflung

Opera oder Firefox.
Safari und Chrome schleppen Datenschutzprobleme mit sich und fallen hier leicht negativ auf, sind insgesamt jedoch auf einer Ebene mit den beiden erstgenannten.
Hauptsache ihr schickt den IE zu seinem Bestimmungsort: In die Wüste, wo er keinem Schaden kann.

Category: Webdesign

2 comments on “CSS 3 Selektoren

  1. (Un-)passend zum Kommentar: Nichts wird so heiss gegessen, wie es gekocht wird.

  2. Und bis Microsoft es isst, ist es kalt.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.


neun × eins =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>