Attribute selectors

Attribute selectors are part of the CSS2/CSS3 specifications and highly effective. They allow you to do things that were only possible with Javascript up to now.

Attribute selectors relate to attributes of elements. By adressing these attributes (bold in the example) directly you can define the presentation of the correspondant elements specifically.
Example: <img src=”" alt=”" /> oder <a href=”" title=”" ></a>

The following listing shows the use of the different attribute selctors by means of a link, whos title attribute has the value "foobar". 
<a href="#" title="foobar" >intensivstation.ch</a>

a[title]
Fits an element a with an attribute title.

a[title="foobar"]
Fits an element a with an attribute title and the exact value foobar.

a[title~="foobar"]
Fits an element a with an attribute title, whose list of values, devided by spaces, contains foobar. Would also apply to the attribute value "foobar baz blah".
(a[class~="foobar"] entspricht a.foobar.

a[title|="foobar"]
Fits an element a with an attribute title, whose list of values, devided by hyphens (-), contains foobar.

a[title^="foobar"]
Fits an element a with an attribute title, whose value begins with foobar. Would also apply to the attribute value foobarbaz.

a[title$="foobar"]
Fits an element a with an attribute title, whose value ends with foobar. Would also apply to the attribute value bazfoobar.

a[title*="foobar"]
Fits an element a with an attribute title, whose value contains foobar at an arbitrary position in the string.

Examples with attribute selectors

Almost anything can be adressed by attribute selectors.

Links with a certain filetype

This example can be applied on any filetype.

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'] {   
   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 suoer 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;
   }

http://intensivstation.ch/

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;
   }