Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3: Mit Attribut-Selektoren Elemente individuell ansteuern

Mit CSS3 gibt es neue Möglichkeiten, auf HTML-Elemente zuzugreifen. Bereits seit CSS2 gibt es die Möglichkeit, auf Elemente zuzgreifen, die ein bestimmtes Attribut besitzen bzw. einen bestimmten Attributwert. So kann man z. B. auf INPUT-Elemente zugreifen, die das Attribut „type“ mit dem Wert „text“ besitzen. Mit CSS3 wird diese Möglichkeit der Attribut-Selektoren ausgeweitet, sodass nun sehr viel individueller auf Elemente mit bestimmten Attributen zugergiffen werden kann.

Das ist bereits seit CSS2 möglich

Die einfachste Möglichkeit ist, per CSS auf Elemente zuzugreifen, die ein bestimmtes Attribut besitzen – unabhängig davon, welchen Wert dieses Attribut besitzt:

<style type="text/css">
  input[type] { border-color: red; }
</style>

<input type="text" />
<input type="password" />


Das Beispiel ändert die Rahmenfarbe aller INPUT-Elemente, die das Attribut „type“ besitzen. Im nächsten Beispiel wird die Rahmenfarbe aller INPUT-Elemente geändert, bei denen das Attribut „type“ einen bestimmten Wert hat:

<style type="text/css">
  input[type=password] { border-color: red; }
</style>

<input type="text" />
<input type="password" /> <!-- Rahmen wird rot -->


Bei der Angabe von Klassen können Attribute auch mehrere Werte besitzen, die dann mit einem Leerzeichen voneinander getrennt sind. Möchte man Stile auf Elemente mit einer bestimmten Klasse zuweisen, ist das ebenfalls möglich:

<style type="text/css">
  input[class~=dienstlich] { border-color: red; }
  input[class=privat] { border-color: green; }
</style>

<input type="text" class="privat dienstlich" /> <!-- Rahmen wird rot -->
<input type="text" class="privat" /> <!-- Rahmen wird grün -->
<inout type="text" class="dienstlich" /> <!-- Rahmen wird rot -->


Der erste Stil ändert die Rahmenfarbe bei allen Elementen auf Rot, die die Klasse „dienstlich“ besitzen – unabhängig davon, ob weitere Klassen angegeben wurden. Der zweite Stil ändert die Rahmenfarbe aller Elemente auf Grün, die ausschließlich die Klasse „privat“ besitzen.

Manchmal werden der Semantik wegen Klassen vergeben, die einen Bindestrich besitzen. Um solche Klassen nicht einzeln ansteuern zu müssen, lassen sich Stile für Klassen zuweisen, die vor einem Bindestrich identisch sind:

<style type="text/css">
  input[class|=telefon] { border-color: red; }
</style>

<input type="text" class="telefon-privat" /> <!-- Rahmen wird rot -->
<input type="text" class="telefon-dienstlich" /> <!-- Rahmen wird rot -->


Das Beispiel ändert die Rahmenfarbe aller Elemente auf Rot, die mit „telefon-“ beginnen.

Anzeige

Das ist mit CSS3 möglich

Mit CSS3 gibt es weitere Möglichkeiten, auf Elemente aufgrund ihrer Attribute zuzugreifen. Dabei erinnern die Möglichkeiten im Ansatz an reguläre Ausdrücke. Es können so auf Elemente zugegriffen werden, deren Attribute mit einer bestimmten Zeichenkette beginnen:

<style type="text/css">
  input[class^=tele] { border-color: red; }
</style>

<input type="text" class="telefon" /> <!-- Rahmen wird rot -->
<input type="text" class="telefax" /> <!-- Rahmen wird rot -->


Im Beispiel wird die Rahmenfarbe aller Elemente auf Rot gesetzt, deren Klasse mit „tele“ beginnt. Analog dazu kann auch auf Elemente zugegriffen werden, deren Attribute mit einer bestimmten Zeichenkette enden:

<style type="text/css">
  input[class$=name] { border-color: red; }
</style>

<input type="text" class="vorname" /> <!-- Rahmen wird rot -->
<input type="text" class="nachname" /> <!-- Rahmen wird rot -->


Zuletzt gibt es noch die Möglichkeit, auf Elemente zuzugreifen, die an einer beliebigen Stelle eine bestimmte Zeichenkette beinhalten:

<style type="text/css">
  input[class*=familie] { border-color: red; }
</style>

<input type="text" class="mehrfamilienhaus" /> <!-- Rahmen wird rot -->
<input type="text" class="familienstand" /> <!-- Rahmen wird rot -->


Das Schöne bei den Attribut-Selektoren – selbst bei den neuen CSS3-Selektoren – ist, dass alle aktuellenBrowser sie bereits unterstützen und auch die aktuellen Vorgängerversionen wie Firefox 3, Safari 3 und Opera 10.3 sowie auch der Internet Explorer 7 damit arbeiten.

Nutzt ihr die Möglichkeit, per Attribut-Selektoren auf Elemente zuzugreifen oder vergebt ihr lieber Klassen und IDs, um Elemente individuell anzusteuern?

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
lineman
lineman

Ernsthaft!? Für welche Kunden arbeitet Ihr? Der Apotheke von nebenan, kann man da vielleicht unter die Arme greifen und Ihnen neue Browser installieren. Wenn ihr meint man könne einem großen Unternehmen vorschreiben, welchen Browser sie zu installieren haben... wohl kaum.

Nichts desto trotz sind Selektoren toll und nen alter Hut ;)

Felix
Felix

wieso arbeitet ihr noch für den IE6? Ich hoffe mit Aufpreis! sonst denken sich die Kunden ja nie, ach gehen wir von dem Mistding weg.. braucht ja keiner ;)

ansonsten danke an den Autoren für Info :))

Thomas
Thomas

Ich nutze die Attribut-Selektoren schon länger, meist um verschiedene Formular-Inputs zu unterscheiden:

input[type=checkbox], input[type=radio] { }
input[type=image] { }

oder für kleinere "Hacks":

/* HTML5-seamless attribute for iframe (which isn't currently implemented) */
iframe[seamless] {
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden; }

oder um im Print-Layout die Verweise anzuzeigen:

@media print {
[href]:after {
content: ' (' attr(href) ')';
font-size: .9em;
font-style: italic;
color: #666; }
}

Norman

IE6 konsequent nicht mehr unterstützen oder 100% Aufschlag für die Anpassungen verlangen.. das muss weh tun.. die Leute muss man zum Umstieg zwingen ;)

pagerocker
pagerocker

Leider nicht! :(

Ich muss leider immer noch den IE6 bedienen...
Allerdings wird das mit schwindenden Marktanteilen auch immer weniger. (*JUHUU*)

Ich sauge also begierig alle Informationen auf, die ich demnächst gebrauchen kann wenn es auch bei uns heißt "IE6 adé!".

Es ist echt traurig das einige Leute immer noch den IE6 benutzen, obwohl der schon über 10 Jahre alt ist. Man kanns soviel besser haben.

Naja, aber ich schweife ab... vielen Dank für die Info! Werds bald ausprobieren!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot