ist). Im obigen Beispiel ist innerhalb des div -Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein p -Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p -Element mehr als eine Verschachtelungsebene unterhalb des div -Elements liegt (die Tabellenelemente sind dazwischen). Auch für Elemente, die auf gleicher Ebene hintereinander notiert werden, gibt es Selektoren: div + p { margin-top: 40px; } Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p -Elemente, die unmittelbar auf ein div -Element folgen, einen Abstand von 40 Pixeln nach oben hin erhalten ( margin-top: 40px; ). Im HTML-Code weiter oben ist das beim vorletzten p -Element der Fall. Dieses folgt unmittelbar hinter dem div -Bereich auf gleicher Hierarchie-Ebene. 13.2.10 Formate für Elemente mit bestimmten Attributen Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen. Beispiel input[src] { margin: 5px; } input[type=password] { color: blue; } td[abbr~=Berlin] { background-color:#FFFF00 } } *[lang|=en] { background-color: #FF0000; color: #FFFFFF; } Erläuterung In dem Beispiel ist zunächst eine Formatdefinition für alle input -Elemente notiert, die ein Attribut src im einleitenden Tag haben (grafische Submit-Schaltflächen des Typs
). Solche Elemente erhalten einen Randabstand von 5 Pixeln zu allen Seiten hin. Mit dem Attribut-Selektor input[type=password] werden alle input -Elemente erfasst, die ein type -Attribut mit dem Wert password haben (Passworteingabefelder –
). Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute. Mit *[lang|=en] schließlich werden alle Elemente erfasst, die ein globales Attribut lang mit einem Wert, der mit en beginnt, aufweisen, und danach eventuell einen Bindestrich enthalten (wie en oder en-US ). 13.2.11 Formate für Elemente mit class-Attribut Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem globalen Attribut class . Beispiel img.left { float: left; margin-right: 25px; margin-bottom: 12px; } img.right { float: right; margin-left: 25px; margin-bottom: 12px; } .lichtblau { color: rgb(210, 225, 250); } .fett { font-weight: bold; } Im Beispiel werden zwei Klassen für das img -Element von HTML sowie zwei allgemeine Klassen definiert. In allen Fällen müssen die Elemente entsprechende class -Attribute haben, damit die Formate angewendet werden. Selektoren für Klassen sind am charakteristischen Punkt erkennbar. Sie können eine Kombination von Elementnamen undKlassennamen erzwingen, wie bei img.left oder img.right , oder allgemeine, in jedem Element mögliche Klassennamen, wie im Beispiel bei .lichtblau und .fett . Im letzteren Fall beginnt der Selektor einfach mit einem Punkt (die Schreibweise *.lichtblau ist aber auch korrekt). Angewendet werden die beiden ersten Beispielformate also auf Elemente mit Tags wie oder . Bilder mit class="left" erzeugen laut Formatdefinition einen Textumfluss, und zwar so, dass die Bilder links angeordnet werden und rechts von nachfolgendem Inhalt umflossen werden ( float: left; ). Zusätzlich werden Abstände zum umfließenden Text rechts und unten ( margin-right und margin-bottom ) definiert. Die Formatdefinitionen für den Selektor img.right bewirken den umgekehrten Fall. Das Bild wird rechts ausgerichtet und links vom nachfolgenden Inhalt umflossen. Dafür werden Abstände links und unten definiert. Die Beispiel-Selektoren .lichtblau und .fett treffen auf Tags wie