Kapitel 2: Selektoren
Struktur der Selektoren:
H1 (Selektor(en) {background: (Eigenschaft)yellow;(Wert) Deklarations(block)
Demo 1
Element-Selektoren
h1{color:red;} /*Mit ; (Semikolon) abgeschlossene Einzeldefinitionen*/
p{font: medium Helevetica;}/*Mit Leerschlag abgegrenzte Eigenschaften*/
h2{font: large/150% sans-serif;} /*font-size und line-height- Kombination*/
Gruppierung
h1,h2,h3,p{Deklarationen} /*kommaseparierte Liste gruppiert alle betroffenen Selektoren*/
Besonderheit: *{Deklarationsblock} /*Universal-Selektor*/
Demo 2
Klassen- und ID-Selektoren
Klassen (Werden mit einem vorgängigen Punkt definiert)
Beispiel 1: p.warning{Deklarationsblock} /*verbunden mit einem Element*/
Beispiel 2: .warning{Deklarationsblock} /* ohne Elementverbindung*/
Im Öffnungstag muss class="Klassenname" auf jeden Fall angegeben werden, damit dier Deklaration wirksam wird.
Beispiel 3: <p class="warning urgent"> /*mehrere Klassen in einer Definition*/
Id (Werden mit einem vorgängigen # definiert)
Beispiel 1: *#name{Deklarationsblock;} /* heisst: alle Elemente mit dem Id-Attribut #name*/
Im Tag werden die Ids mit <div id="Idname"> eingebunden.
Id's sind in DOM (Document Object Model) eindeutige Elementbezeichnungen und sollten jeweils nur einmal in einer Datei vorkommen. Klassen dürfen beliebig viel mal aufgerufen werden.
Es können nicht mehrere ID's miteinander definiert werden (wie bei Class).
Class und ID-Namen sind case-sensitiv, also Achtung auf Gross- oder Kleinschreibung!
Demo 3
Attribut-Selektoren (gelten in Opera, Gecko, aber nicht in IE5/Mac und IE6/Win!!)
Beispiel 1: h1[class] {Deklarationsblock} /*alle Elemente welche ein Klassenattribut haben, werden berücksichtigt!*/
Beispiel 2: img[alt] {Deklarationsblock} /*gesetztes alt-Attribut im Img-Tag wird berücksichtigt*/
Beispiel 3: *[title] {Deklarationsblock} /*alle gesetzten title-Attribute werden berücksichtigt*/
Beispiel 4: a[href][title] {Deklarationsblock} /*Sowohl als auch in <a> werden berücksichtigt*/
Selektion basierend auf einer genauen Werte-Angabe
Beispiel: a[href="http://www.w3c.org/"][title="W3C Home"]{Deklarationsblock} /*Angabe des Wertes muss präzis sein*/
Selektion basierend auf einer Teilwert-Angabe
Beispiel 1: p[class~="warning"] {Deklarationsblock} /*Wenn zwei Klassen bestehen. Tilde beachten.*/
Beispiel 2: img[title~="Figure"] {Deklarationsblock} /*Teil aus Title-Text*/
Selektion basierend auf einem Einzelattribut
Beispiel: *[lang|="en"] {Deklarationsblock} /Bei verschiedenen Lang-Angaben Auswahl von "en" */
Demo 4
Selektion aufgrund der Ausnutzung der Dokumentenstruktur
Parent-Child-Beziehungen sind eine besondere Form von "Vorgänger-Nachfolger" Beziehungen.
Sie werden durch die Anordnung und Folge der HTML-Tags im Dokument bestimmt.
Kontextuelle Selektoren
Beispiel: h1 em {Deklarationsblock} //gefunden in, Teil von, Nachfolger von. Der Nachfolgeselektor muss sich innerhalb des geöffneten Vorgängertags befinden.
Diese Selektoren können auch in Klassen verwendet werden.
Child Combinator //wird von IE nicht unterstützt
Beispiel: h1 > strong{color:red} //Nur der direkte Abkömmling wird ausgewählt (Child)*/
Sibling Combinator //wird von IE nicht unterstützt
Der unmittelbar danebenliegende (nächste) "Bruder" wird ausgewählt.
Beispiel: h1 + p{margin-top:0px} /*wählt das unmittelbar folgende Element , welches gemeinsame Eltern hat.*/
Demo 5
Pseudo-Klassen und Pseudo-Elemente
Sie beruhen nicht auf der Dokumentenstruktur, sondern auf dem "fiktiven" Zustand eines Elements.
Beispiel 1: a:visited{color:blue} //Doppelpunkt ist das Pseudo-Element und nimmt einen bestehenden Zustand des Links "besucht" auf. Entsprechen den Body-Attributen : link und vlink in (X)HTML.
Beispiel 2: a.external:link, a.external:visited{text-decoration:none} /*Beispiel mit Klassen*/
CSS 2.1: Dynamische Pseudo-Klassen
:focus Ausgewählt von Maus oder Cursor (Formulare)
:hover Mouse-Zeiger beim überfahren des Links oder Elements
:active Entspricht body:alink in HTML.
Diese Elemente können allen Tags zugeordnet werden. Ausser bei IE!!!
Beispiel 1: input:focus{Background:silver}
Beispiel 2: body *:hover{background:yellow}
Reihenfolge der Angaben: link-visited-focus-hover-active! (ist wichtig für das richtige Funktionieren
Demo 6
:first-child //Von IE nicht unterstützt. Entsprecht in etwa p>b.
:lang(de)
Kombination von Pseudoelementen (wird von IE nicht unterstützt)
Beispiel: a:link :hover{text-decoration:none}
a:visited:hover:lang(de) {color:silver}
:first-letter //funktioniert im Allgemeinen nur bei Blockelementen
:first-line //dito
:before //generiert Content
:after //bezieht sich auf content (S. später)
Weiter zu Kapitel 3: Struktur und Kaskadierung