proxiss e-books

proxiss E-Books

CSS Selektoren - Kurzreferenz

Mittels fortgeschrittener CSS/XHTML Programmierung lassen sich Inhalt und Darstellung vorbildlich trennen. Diese Referenz behandelt CSS Selektoren in aller Kürze, enthält keine erklärenden Erläuterungen sondern dient ausschließlich dem schnellen Nachschlagen. Sie sollten mit Begriffen wie XHTML, DOM und CSS Styling bereits bestens vertraut sein.

Grundlagen

  • Type selector
    Alle Elemente eines Typs auswählen.
    Beispiel: em {font-weight: bold;}
  • Class selector
    Alle Elemente einer Klasse auswählen.
    Beispiel: .classname {font-weight: normal;}
  • ID selector
    Element mit gegebener Id auswählen.
    Beispiel: #idname {font-weight: normal;}
  • Concatenator
    Elemente eines Typs mit gegebener Klasse oder Typ auswählen.
    Beispiel: em.classname, em#idname {font-weight: normal;}
  • Universal selector
    Alle Elemente auswählen.
    Beispiel: * {padding:0;}
  • Descendent selector
    Alle hierarchisch nachgeordneten Elemente auswählen (descendants).
    Beispiel: p em {font-weight: normal;}
    -> Wählt alle em's innerhalb von p's.

Fortgeschrittene Selektoren

Achtung: IE6 unterstützt von wenigen Ausnahmen abgesehen nur die Grundlagen.

  • Child selector
    Alle hierarchisch direkt nachgeordneten Elemente auswählen (direct descendant).
    Beispiel: p > em {font-weight: normal;}
    -> Wählt alle em's direkt unterhalb von p's.
  • Adjacent sibling selectors
    Alle hierarchisch nebengeordneten Elemente auswählen
    Beispiel: h3 + p {font-size:80%;}
    -> Alle p's auswählen die auf h3's folgen.
  • Attribute selectors
    Elemente nach ihren Attributen auswählen.
    Beispiel: img[title] {border: 1px solid yellow;}
    -> Alle img's mit angegebenem Attribut title auswählen.
Die proxiss GmbH bietet CSS Programmierung nach Designvorgabe an. Tel: 08061/34984-47 - oder nutzen Sie unser Kontaktformular für eine unverbindliche Anfrage.

Pseudoklassen

  • Pseudo class selectors
    Pseudoklassen schränken die Elementauswahl auf spezielle Zustände ein. Pseudoklassen sind: [first-child, link, visited, lang(n)].
    Syntax: element:pseudoclass.
    I.e. div#leitartikel:first-child {text-transform : capitalize;}
  • Dynamic pseudo class selectors
    Wählt Elemente in Zuständen die sich dynamisch verändern, dynamische Pseudoklassen sind: [hover, active, focus].
    Syntax: element:pseudoclass.
    I.e. a:hover {color:red;}
  • Pseudo element selectors
    Pseudoelemente können ohne spezielle Auzeichnung im Markup gewählt werden. Pseudoelemente sind: [first-line, first-letter, before, after].
    Syntax: element:pseudoclass.
    I.e. p:first-letter {font-size:130%;}

Ausblick

Durch die Verwendung von fortgeschrittenem CSS kann praktisch jedes Design abgebildet werden. Die früher übliche tabellarische Darstellung sollte heute vermieden werden. Klares Markup, "reduce to the max" und semantische Codierung sind die Themen der Zukunft.
Leider beherrscht der immer noch viel verbreitete Internet Explorer 6 von Microsoft viele dieser Techniken nicht. Aber warum soll man Nutzer fortgeschrittener Browser wie Firefox oder Safari nicht auch mit einem besseren Design belohnen?