Verknüpfungen in CSS 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.

* {color: #ff0000}
Es werden alle Elemente mit der Farbe "Rot" definiert.

*.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
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="http://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
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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Keine weiterführenden Beiträge.