css-café

Beispiele

Elemente können über ihre Attributwerte angesprochen werden.

Syntax: E[foo^="bar"]

Beispiel:
a[href^="http://"] { 
background-image: url(../images/extern.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
padding: 0 15px 0 0;
white-space: nowrap;
}

Der Attributwert beginnt (^) mit 'http://'.

Einem externen Links wird ein Icon zugewiesen.

Syntax: E[foo$="bar"]

Beispiel:
a[href$=".pdf"] { 
background-image: url(images/ic_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0 0 25px;
white-space: nowrap;
}

Der Attributwert endet ($) mit '.pdf'.

Dem Verweis auf ein bestimmtes Dateiformat wird ein Icon zugewiesen.

Syntax: E[foo*="bar"]

Beispiel:
div[id*="content"] { 
background:#ff0;
}

Der Attributwert enthält (*) den Begriff 'content'.

Angesprochen würden also zum Beispiel folgende Elemente:

div id="content-left"
div id="center-content"
div id="teaser-content-left"

Weitere Attribut-Selektoren (CSS2.1) finden Sie in der Übersicht „Alle Selektoren”.