CSS Attribut Selektoren

Da schreibt man im letzten Artikel etwas über Regexp-Selektoren in JQuery und meint damit ein Problem zwar etwas umständlich, aber elegant gelöst zu habe. Einen Tag später allerdings stellt man fest, dass man den Umweg über JQuery gar nicht hätte gehen müssen, sondern gleich auf Attributbedingte Formate (wie es bei SELFHTML so schön deutsch heißt) hätte setzen müssen.

Ein HTML-Auszug sieht so aus:

[sourcecode lang=“html“]
<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!– … –>
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
[/sourcecode]

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

[sourcecode lang=“css“]
td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.