Durch Verknüpfungen in CSS Stylesheets lassen sich viele Operationen
und Eigenschaften auf verschiedene Elemente oder Elementgruppen
begrenzen. In diesem Artikel werden alle CSS 1 und CSS 2 Verknüpfungen
kurz vorgestellt.
Verknüpfungen sind in CSS ein wichtiger Bestandteil. Bereits
im Artikel "Einführung
in CSS" haben Sie die "." Verknüpfung kennen
gelernt. Doch es gibt noch weitere Formen solcher Verknüpfungen.
Verknüpfungen in CSS 1
In CSS 1 gab es noch nicht so einen großen Umfang an Verknüpfungen,
da die Implementierung von CSS noch recht neu war. Die wichtigsten
Verknüpfungen von CSS 1 haben Sie bereits im Artikel "Einführung
in CSS" kennen gelernt.
Zu der "," und "." (Komma-, und Punktverknüpfung)
gesellt sich noch die "#" Verknüpfung. Diese hat
eine ähnliche Bedeutung wie die "." Verknüpfung,
nur das über die "#" Verknüpfung die Elemente
mit der jeweils entsprechenden ID im ID-Attribut angesprochen
werden.
h1#rot
{color: #ff0000}
h1#gruen
{color: #00ff00}
Angesprochen wird das Element, wie gesagt durch die entsprechende
ID.
<h1 id="rot">Erste Überschrift</h1>
<h1 id="gruen">Zweite Überschrift</h1>
Desweiteren gibt es noch die " " (Leerzeichen) Verknüpfung.
Über diese Verknüpfung werden die entsprechenden Elemente
angesprochen, sofern Sie ineinander verschachtelt vorkommen. So
kann man z.B. alle Bilder ansprechen, die in einem Paragraph liegen
usw.
p img
{border: 1 solid black}
Diese Anweisung wird auf alle Bilder (img-Tag) angewendet, die innerhalb
eines Paragraphen liegen. Hierbei wird dem jeweiligen Bild ein 1px
dicker, schwarzer Rahmen gegeben.
Verknüpfungen in CSS 2
CSS 2 erweitert Funktionalität immens. So ist es nun möglich,
Elemente mit CSS anzusprechen, die ein bestimmtes Attribut haben,
oder einen bestimmten Attributswert.
Stern-Verknüpfung
Die * Verknüpfung spricht alle vorhandenen Elemente an.
*Es werden alle Elemente mit der Farbe "Rot" definiert.
{color: #ff0000}
*.rot
{color: #ff0000}
Alle Elemente mit class="rot", sei es auch in wie weit
sie verschachtelt sind, werden rot dargestellt.
Größer-als Verknüpfung
Ja auch teilweise logische Verknüpfungen sind mit CSS 2 möglich.
Die Größer-als Verknüpfung spricht diejenigen Elemente
an, die eine Ebene untergeordnet sind. So ist für Listen das
Übergeordnete Element <ul>, das Untergeordnete
Element ist <li>.
style.css
ul > li
{color: #ff0000}
css_3.html
<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>
</body>
</html>
Das Ergebnis im Netscape 6.1
Die Größer-als Verknüpfung in CSS 2
Plus-Verknüpfung
Mit der Plus-Verknüpfung werden in CSS 2 weitere Möglichkeiten
wahr. Über die Plus-Verknüpfung kann man Elemente ansprechen,
die direkt aufeinandern folgen.
p + strong
{color: #ff0000}
Hierbei wird das <strong> Element angesprochen, wenn
es direkt nach dem <p> Element folgt.
Z.B.
<p><strong>Text</strong></p>
Attributverknüpfungen mit CSS 2
Völlig neu sind die Attributverknüpfungen in CSS 2. Hiermit
kann man CSS Formatierungen z.B. nur für Elemente möglich
machen, die ein bestimmtes Attribut gesetzt haben.
Attributverknüpfung
Eine einfache Attributverknüpfung wird hinter dem Element,
oder der definierten Klasse in [] Klammern angegeben.
a[target]
{ color: #0000ff}
Diese Anweisung stellt alle Links, die ein target="" Attribut
haben, blau dar.
Attributwert-Verknüpfung
Eine andere Möglichkeit ist es, direkt die Attributwerte anzusprechen.
Ist bei einem Link, z.B. das target-Attribut auf "_blank"
gesetzt, dann wird der Links blau dargestellt.
style.css
a[target="_blank"]
{ color: #0000ff}
css_4.html
<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<a href="https://www.devmag.net" target="_blank">devmag.net</a><br>
<a href="http://www.pckrieg.de">PC-Krieg</a>
</body>
</html>
Wie Sie sehen hat ein Link das Target-Attribut, der andere nicht.
Das Ergebnis, wiederum nur im Netscape oder Opera zu sehen:
Attributverknüpfungen mit CSS 2
Was natürlich auch vorkommt ist, das Sie alle Links, entweder
mit einem target="_blank", oder mit einem target="_top"
Attribut ansprechen möchten. Auch das ist möglich, es
werden einfach mehrere Attributwerte in der CSS Styleanweisung angegeben.
a[target~="_top _blank"]
{color: #336699}
So, im zweiten Teil des CSS Kurses wurden ihnen die CSS Verknüpfungen
vorgestellt. In der praktischen Anwendung von CSS kann und muss
auf diese sehr oft zurückgegriffen werden.
CSS Verknüpfungen kann man beliebig kombinieren, es gilt: einfach
ausprobieren.