Attributselektoren
Attribut-Selektoren sind Teil der CSS2/CSS3 Spezifikation und extrem effektiv. Sie erlauben Dinge, die man bis jetzt nur mit Javascript machen konnte.
Attribut-Selektoren beziehen sich auf die Attribute von Elementen. Man kann diese Attribute (im Beispiel fett geschrieben) direkt ansprechen und die Darstellung der dazugehörigen Elemente spezifisch definieren.
Beispiel: <img src=”" alt=”" /> oder <a href=”" title=”" ></a>
Die nachfolgende Auflistung zeigt die Anwendung der verschiedenen Attribut-Selektoren anhand eines Links, dessen Titel-Attribut den Wert 'foobar' besitzt.
<a href="#" title="foobar" >intensivstation.ch</a>
a[title]
Passt auf ein Element a mit dem Attribut title.
a[title="foobar"]
Passt auf ein Element a mit Attribut title und dem exakten Wert foobar.
a[title~="foobar"]
Passt auf ein Element a mit Attribut title, dessen durch Leerzeichen getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert "foobar baz blah" zutreffen.
a[title|="foobar"]
Passt auf ein Element a mit Attribut title, dessen durch Trennstriche (-) getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert "foobar-baz-blah" zutreffen.
a[title^="foobar"]
Passt auf ein Element a mit Attribut title, dessen Wert mit foobar beginnt. Würde auch auf den Attribut-Wert foobarbaz zutreffen.
a[title$="foobar"]
Passt auf ein Element a mit Attribut title, dessen Wert mit foobar endet. Würde auch auf den Attribut-Wert bazfoobar zutreffen.
a[title*="foobar"]
Passt auf ein Element a mit Attribut title, dessen Wert foobar an beliebiger Stelle in der Zeichenkette enthält.
Beispiele mit Attributselektoren
Eigentlich kann fast alles mit Attribut-Selektoren angesprochen werden.
Links mit einem bestimmten Filetype
Dieses Beispiel kann auf alle beliebigen Filetypes angewendet werden.
Hier kann man ein PDF herunter laden, Word DOC, Exel File XLS
a[href $='.pdf'] {
padding:0 0 0 25px;
background: url(icons/pdf.gif) no-repeat center left;
}
a[href $='.doc'], a[href $='.docx'], a[href $='.DOC'] {
padding:0 0 0 25px;
background: url(icons/doc.gif) no-repeat center left;
}
a[href $='.xls'] {
padding:0 0 0 25px;
background: url(icons/xls.gif) no-repeat center left;
}
Attribute deren Wert mit einem bestimmten Wort enden
In diesem Beispiel wird das title Attribut angesprochen, bei dessen Wert am Ende das Wort monorom steht.
HTML
<a href="/" title="CSS von monorom" >CSS von monorom</a>
CSS a[title$="monorom"] {
border:1px solid #ff6677;
padding:4px;
}
CSS von monorom
Achtung: Gross- Kleinschreibung muss beachtet werden, ansonsten funktioniert es nicht.
Irgendwo im Attribut ein bestimmtes Wort
In diesem Beispiel wird das title Attribut angesprochen, bei dem an beliebiger Stelle im Wert das Wort super vorkommt.
HTML
<a href="/" title="ist super monorom happy" >Ist monorom happy</a> CSS
a[title*="super"] {
border:2px solid #3F3132;
padding:4px;
}
ist monorom super happy. ja monorom ist happy.
Attribute deren Wert mit einem bestimmten Wort beginnen
So können zum Beispiel alle externen Links mit Attribut-Selektoren angesprochen werden
<a href="http://intensivstation.ch/">CSS Intensivstation</a>
a[href ^="http://"] {
background: url(icons/external.png) center right no-repeat;
padding-right: 13px;
}
Ansprechen eines speziell definierten Attributes
Selektoren auf das Attribut type eines Input Elements ersetzt Klassen, die vorher immer gebraucht wurden um den verschiedenen Typen (text, radio, checkbox) gerecht zu werden.
Für Formulare eignen sich Attribut-Selektoren besonders. Man kann sie nach dem title Attribut selektieren, oder wie im folgenden Beispiel den Input-Type direkt ansprechen. Man kann diese Anwendungen auch problemlos kombinieren oder nur spezielle Inputs vom Typ text ansprechen, in denen ein bestimmtes Wort im title vorkommt. Die Definition kann man dann noch vom Kontext abhängig machen, um die Darstellung auf einen spezifischen Bereich einzuschränken.
<input type="text">
input {border:1px solid #DB7093; width:300px;}
<input type="radio">
input[type='radio'] {border: none; width:auto;}
<input type="checkbox">
input[type='checkbox'] {border: none; width:auto;}
Banner abfangen und per CSS verstecken.
img[width="468"][height="60"], img[width="468px"][height="60px"] {
display: none;
}