proxiss E-Books

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.

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?

zurück blättern
Webtechnik How-To's und Kurzreferenzen
Kapitel