Die Macht der Selektoren

Durch die Benutzung von Klassen und IDs kann man sehr effektiv auf die Strukturen von HTML-Seiten zugreifen. Doch leider wird dadurch auch der Quellcode der Seite vergrößert. In vielen Fällen ist das aber unnötig, denn oft werden Klassen aus Bequemlichkeit eingesetzt um schnell auf das Richtige zu zugreifen. CSS bietet über Selektoren mehr als nur den Zugriff auf Tags, Klassen und IDs.

Arten von Selektoren

Ok, fangen wir mit den üblichen Verdächtigen an.

  1. Tag {
  2. color: red; 3
  3. }
  4. .Klasse {
  5. color: blue;
  6. }
  7. Tag#ID {
  8. color: green;
  9. }

Attributs-Selektoren

Dann gibt es aber auch noch Attributes-Selektoren. Viel Tags unterscheiden sich ja durch die Verwendung von Attributen und genau diese Unterscheidungen kann man auch in CSS nutzen.

Das erste Beispiel formatiert alle -Tags mit einem titel-Attribute

  1. a[title] {
  2. color: red;
  3. }

Das nächste Beispiel formatiert alle <a>-Tags mit dem rel-Attribute und dem Wert copyrigth blau.

  1. a[rel=copyright] {
  2. color: blue;
  3. }

Im dritten Beispiel werden die <a>-Tags grün formatiert, die im lang-Attribute den Wert en stehen haben. Dabei kann der Wert in einer durch Leerzeichen getrennten Liste stehen.

  1. a[lang~=en] {
  2. color: green;
  3. }

Das folgende Beispiel formatiert alle <a>-Tags die im href-Attribute mit mailto beginnen.

  1. a[href|=mailto:] {
  2. color: yellow;
  3. }

Das letzte Beispiel zeigt wie <a>-Tags grau formatiert werden, die im href-Attribute mit dem Wert .pdf enden.

  1. a[href^=.pdf] {
  2. color: grey;
  3. }

Nachbarn, Kinder und Nachfahren

Weiter Möglichkeiten ohne Klassen und IDs gezielt auf Tags zu zugreifen besteht darin Kombinationen der oben beschriebenen Möglichkeiten zu nutzen.

Fangen wir mit den Nachfahren an. Kombiniert man zwei Selektoren mit einem Leerzeichen dann trifft diese Formatierung auf alle Elemente zu die unterhalb des erst genannten Elements sich befinden, egal in welcher Hierarchie-Ebene. Im Beispiel werden alle Verlinkungen in einer ungeordneten Liste rot formatiert, egal ob sie in Unterlisten ober auf der obersten Ebene liegen.

  1. ul a {
  2. color: red;
  3. }

Kindern sind die direkten Nachfahren von Elementen. Das Beispiel zeigt wie die direkt in <div>-Tags eingebunden sind umrandet werden, nicht aber Bilder in einem Absatz innerhalb eines <div>-Tags.

  1. div > img {
  2. border: thin solid black;
  3. }

Bei Nachbarn kann das folgenden Element eines Elementes formatieren, hier ist es der erste Absatz nach einer Überschrift.

  1. h3 + p {
  2. boder: thin dashed darkred;
  3. }

Pseudo-Klassen

CSS bietet auch schon vorgegebene Klassen um schnell auf Elemente in der HTML-Seite zugreifen zu können. Dabei beschränkt sich die Selektion nicht nur auf die reine Struktur, sondern auch auf Zustände bzw. Interaktivität.

Zum Beispiel kann man mit der Pseudo-Klasse :first-child das erste Kind eines Elementes formatieren. Im Beispiel bekommt das erste Kind, also der erste Listeneintrag einen Rahmen an der Oberseite.

  1. ul:first-child {
  2. border-top: thin solid black;
  3. }

Man kann aber auch die Zustände von Verlinkungen durch :link und :visited unterschiedlich darstellen.

  1. a:link {
  2. color: blue;
  3. }
  4. a:visited {
  5. color: purpel;
  6. }

Aber nicht nur Zustände von Verlinkungen, sondern auch Interaktivität des Benutzers kann man über CSS darstellbar machen. Das Beispiel zeigt Verlinkungen bei ihrer Aktivierung rot, Eingabefelder bei ihrer Fokusierung mit einer roten Umrandung und Tabellenzeilen beim Drüberfahren mit hellgrauen Hintergrund an.

  1. a:active {
  2. color: red;
  3. }
  4. input:focus {
  5. boder: thin solid red;
  6. }
  7. tr:hover {
  8. background-color: silver;
  9. }

Zusätzlich gibt gibt es auch eine Sprach-Klasse :lang. Dort kann man Formatierungen definieren die durch das lang-Attribut bestimmt werden.

  1. blockquote:lang(de) > p {
  2. quotes: ‘»’ ‘«’ ‘2039′ ‘203A’
  3. }

Pseudo-Elemente

Neben den Pseudo-Klassen existieren in CSS auch sogenannte Pseudo-Elemente.

  1. p:first-line {
  2. color: red;
  3. }
  4. p:first-letter {
  5. font-size: 2em;
  6. }
  7. li:before {
  8. content: ‘►’;
  9. }
  10. a:after {
  11. content: ‘ [’ attr(href) ‘]’:
  12. }

In dem letzen Beispiel werden die verschiedenen Pseudo-Elemente aufgelistet. Dazu zählt unter anderem :first-line welches die erste Zeile des Elementes, hier eines Absatzes, formatiert. Mit :first-letter kann der erste Buchstabe eines Elementes gesondert formatiert werden.

Die beiden letzten Formatierungen zeigen jeweils vor bzw. hinter dem Element Inhalt an, der aber nicht im Quellcode vorhanden ist. Ein besondere Form, die gut im Ausdruck verwendet werden kann, liegt bei der Formatierung des Links vor. Hier wird nach jeder Verlinkung der Wert des href-Attributs in eckigen Klammern angezeigt.

Ausblicke

Ab CSS 3 wird die Selektierung von Elementen noch differenzierter. Hier einmal eine Auflistung der zusätzlichen Möglichkeiten:

  • Attributs-Selektoren
    • E[foo^=”bar”] an E element whose “foo” attribute value begins exactly with the string “bar”
    • E[foo$=”bar”] an E element whose “foo” attribute value ends exactly with the string “bar”
    • E[foo*=”bar”] an E element whose “foo” attribute value contains the substring “bar”
    • E[hreflang|=”en”] an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”
  • Pseudo-Klassen
    • E:root an E element, root of the document
    • E:nth-child(n) an E element, the n-th child of its parent
    • E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
    • E:nth-of-type(n) an E element, the n-th sibling of its type
    • E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
    • E:last-child an E element, last child of its parent
    • E:first-of-type an E element, first sibling of its type
    • E:last-of-type an E element, last sibling of its type
    • E:only-child an E element, only child of its parent
    • E:only-of-type an E element, only sibling of its type
    • E:empty an E element that has no children (including text nodes)
    • E:target an E element being the target of the referring URI
    • E:enabled
    • E:disabled a user interface element E which is enabled or disabled
    • E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
    • E::selection the portion of an E element that is currently selected/highlighted by the user
    • E:not(s)an E element that does not match simple selector s
  • Kombination
    • E ~ F an F element preceded by an E element

2 Gedanken zu “Die Macht der Selektoren

  1. Pingback: CSS-Seminar bei VVA | RE-Design - Enrico Reinsdorf

  2. Pingback: Alle Türchen von 2007 sind offen | RE-Design - Enrico Reinsdorf

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

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