Selektoren

(Auszug aus "XML in a Nutshell" von Elliotte Rusty Harold & W. Scott Means)

CSS bietet nur begrenzte Möglichkeiten zur Auswahl von Elementen, auf die eine bestimmte Regel angewendet werden soll. Viele Stylesheets verwenden nur die Elementnamen oder Listen von Elementnamen, die durch Kommas getrennt werden, wie im Beispiel Ein CSS-Stylesheet für Rezepte demonstriert. CSS stellen jedoch einige andere einfache Selektoren bereit, auf die Sie zurückgreifen können, obwohl diese bei weitem nicht so leistungsfähig sind wie die XPath-Syntax aus XSLT.

Der Universal-Selektor

Das Sternchen umfasst alle Elemente; das heißt, es wendet die Regel auf alle Elemente im Dokument an, die nicht über eine speziellere anders lautende Regel verfügen. Zum Beispiel besagt diese Regel, dass alle Elemente im Dokument eine große Schriftart verwenden sollen:

* {font-size: large}

Nachfahren, Kinder und Geschwister adressieren

Ein Elementname A, dem ein weiterer Elementname B folgt, umfasst alle Elemente B, die Nachfahren von A-Elementen sind. Diese Regel beispielsweise trifft auf menge-Elemente zu, die Nachfahren der Elemente zutaten sind, aber nicht auf andere, die an anderer Stelle im Dokument auftauchen:

zutaten menge {font-size: medium}

Wenn die beiden Elementnamen durch ein Größer-als-Zeichen (>) getrennt werden, muss das zweite Element ein unmittelbares Kind des ersten sein, damit diese Regel zutrifft. Folgende Regel beispielsweise weist den menge-Kindelementen der zutaten-Elemente die gleiche Schriftgröße (font-size) wie dem zutaten-Element zu:

zutaten > menge {font-size: inherit}

Werden die beiden Elementnamen durch ein Pluszeichen (+) getrennt, muss das zweite Element das nächste Geschwisterelement unmittelbar nach dem ersten sein. Diese Style-Regel beispielsweise stellt das Property border-top-style nur für das erste geschichte-Element ein, das einem anweisungen-Element folgt:

anweisungen + geschichte {border-top-style: solid}

Attribut-Selektoren

Eckige Klammern erlauben es Ihnen, Elemente mit bestimmten Attributen oder Attributwerten auszuwählen. Diese Regel beispielsweise blendet alle schritt-Elemente aus, die das Attribut optional besitzen:

schritt[optional] {display: none}

Diese Regel blendet alle Elemente aus, die das Attribut optional besitzen, unabhängig vom Elementnamen:

*[optional] {display: none}

Ein Gleichheitszeichen wählt ein Element anhand eines bestimmten Attributwerts aus. Diese Regel beispielsweise blendet alle schritt-Elemente aus, die über ein Attribut optional mit dem Wert yes verfügen:

schritt[optional="yes"] {display: none}

Der Operator ˜= wählt Elemente aus, die ein bestimmtes Wort als Teil eines angegebenen Attributwerts besitzen. Das Wort muss dazu vollständig sein, von anderen Wörtern im Attributwert wird es wie in einem NMTOKENS- oder ENTITIES-Attribut durch Whitespace getrennt. Das heißt, es ist kein Vergleich von Teil-Strings. Diese Regel beispielsweise schreibt alle rezept-Elemente fett, deren quelle-Attribut das Wort »Anderson« enthält:

rezept[quelle˜="Anderson"] {font-weight: bold}

Der Operator |= schließlich prüft gegen das erste Wort einer durch Bindestriche getrennten Liste mit Attributwerten, wie Anderson-Harold oder fr-CA.

CSS stellt auch eine besondere Syntax zum Auswählen von Elementen mit einem bestimmten ID-Wert bereit, selbst wenn Sie den genauen Namen des ID-Attributs nicht kennen. Trennen Sie einfach die ID mit einer Raute # vom Elementnamen. Diese Regel beispielsweise wird ausschließlich auf das schritt-Element angewendet, dessen ID-Attribut den Wert P833 besitzt:

schritt#P833 { font-weight: 800 }

Pseudoklassen-Selektoren

Pseudoklassen-Selektoren treffen entsprechend einer Bedingung, die nicht deren Namen betrifft, auf Elemente zu. Es gibt sieben dieser Selektoren. Sie werden jeweils durch einen Doppelpunkt vom Elementnamen getrennt.

  • first-child

    Die Pseudoklasse first-child passt auf das erste Kindelement des genannten Elements. Wird sie auf das Code-Beispiel Marjorie Andersons Rezept für Southern Corn Bread angewendet, setzt diese Regel das erste und nur das erste schritt-Element kursiv:

    schritt:first-child {font-style: italic}
  • link

    Die Pseudoklasse link trifft auf das angegebene Element ausschließlich dann zu, wenn dieses Element die Quelle eines bisher nicht besuchten Links ist. Beispielsweise färbt diese Regel alle Links im Dokument blau und unterstreicht sie:

    *:link {color: blue; text-decoration: underline}
  • visited

    Die Pseudoklasse visited gilt für alle besuchten Links des angegebenen Typs. Diese Regel beispielsweise markiert alle besuchten Links violett und unterstrichen:

    *:visited {color: purple; text-decoration: underline}
  • active

    Die Pseudoklasse active wird auf alle Elemente angewendet, die der Benutzer momentan aktiviert (zum Beispiel indem er mit der Maus darauf klickt). Was es genau bedeutet, ein Element zu aktivieren, hängt vom Kontext ab. Allerdings können nicht alle Anwendungen Elemente aktivieren. Diese Regel beispielsweise markiert alle aktiven Elemente rot:

    *:active {color: red}
  • linking

    Die linkenden Pseudoklassen werden bisher für XML-Dokumente nicht besonders gut umgesetzt, da die meisten Browser XLinks noch nicht erkennen. Bisher. Mozilla und Netscape 6, die beiden einzigen Browser, die XLinks erkennen, sind auch die einzigen Browser, die diese Pseudoklassen auf XML anwenden werden.

  • hover

    Die Pseudoklasse hover gilt für alle Elemente, auf denen momentan zwar der Cursor ruht, die der Benutzer aber noch nicht aktiviert hat. Diese Regel beispielsweise markiert all diese Elemente als grün und unterstrichen:

    *:hover {color: green; text-decoration: underline}
  • focus

    Die Pseudoklasse focus wird auf das Element angewendet, auf dem momentan der Fokus liegt. Diese Regel zeichnet eine ein Pixel starke, rote Linie um das Element mit dem Fokus, vorausgesetzt, es gibt ein solches Element:

    *:focus {border: 1px solid red }
  • lang

    Die Pseudoklasse lang schließlich trifft auf alle Elemente in der Sprache zu, die durch das Attribut xml:lang festgelegt wurde. Folgende Regel beispielsweise verwendet die Schriftart David New Hebrew für alle Elemente, die in Hebräisch geschrieben wurden (genauer gesagt, alle Elemente, deren xml:lang-Attribut den Wert he oder einen Untertyp davon besitzt):

    *:lang(he) {font-family: "David New Hebrew"}

Pseudoelement-Selektoren

Pseudoelement-Selektoren passen auf Dinge, die eigentlich keine Elemente sind. Ebenso wie Pseudoklassen-Selektoren weist ein Doppelpunkt sie einem Element-Selektor zu. Es gibt vier dieser Selektoren:

  • first-letter
  • first-line
  • before
  • after

Das Pseudoelement first-letter wählt den ersten Buchstaben eines Elements aus. Diese Regel beispielsweise macht aus dem ersten Buchstaben des Elements geschichte ein Initial:

geschichte:first-letter {
   font-size: 200%;
   font-weight: bold;
   float: left;
   padding-right: 3pt
}

Das Pseudoelement first-line wendet auf alle Zeichen der ersten Zeile eines Blockelements eine bestimmte Formatierung an. Wenn die Größe des Browser-Fensters geändert wird und daraufhin Zeichen in der ersten Zeile hinzukommen oder daraus verschwinden, passt sich die Formatierung entsprechend an. Diese Regel beispielsweise formatiert die erste Zeile des Elements geschichte in Kapitälchen anstatt in Kleinbuchstaben:

geschichte:first-line {font-variant: small-caps}

Die Pseudoelemente before und after wählen die Punkte unmittelbar vor und hinter dem angegebenen Element aus. Sie können auf einen Punkt, der keine Breite besitzt, keine Schrift- oder Textstyles anwenden, es ist allerdings möglich, mit Hilfe des Properties content an dieser Stelle Text einzufügen. Zum Beispiel setzt diese Regel den String »Zutaten!« vor das Element zutaten:

zutaten:before {content: "Zutaten! "}

Diese Regel platziert die Nummer des Schritts vor jedes schritt-Element, und zwar in der Form 1., 2., 3., usw.:

schritt:before {
   content: counter(schritt) ". ";
   counter-increment: schritt;
}

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

  


Copyright © 2005 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XML in a Nutshell" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de