Schlagwort-Archive: CSS

CSS Attribut Selektoren

Computer, , ,

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.

Regexp Selektor in JQuery

Computer, , ,

Auf dieser Seite hat James Padolsey eine äußerst hilfreiche Funktion für JQuery vorgestellt. Zwar ist es mit dem CSS3 Attribut-Selektor möglich elemtentare regulärer Ausdrücke zu formulieren, aber diese JQuery-Funktion ist schon sehr fein:
[sourcecode language=“jscript“]
jQuery.expr[‚:‘].regex = function(elem, index, match) {
var matchParams = match[3].split(‚,‘),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(‚:‘)[0] : ‚attr‘,
property: matchParams.shift().replace(validLabels,“)
},
regexFlags = ‚ig‘,
regex = new RegExp(matchParams.join(“).replace(/^\s+|\s+$/g,“), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
[/sourcecode]

Ein paar Beispiele wie die Funktion benutzt werden kann:
[sourcecode language=“jscript“]
// Wählt alle Elemente aus, deren ID mit einem Vokal anfangen:
$(‚:regex(id,^[aeiou])‘);

// Wählt alle DIVs mit Klassen aus, die Zahlen enthalten:
$(‚div:regex(class,[0-9])‘);

// Wähle alle SCRIPT tags aus, die jQuery im src enthalten:
$(’script:regex(src,jQuery)‘);
[/sourcecode]
Bei der Benutzung ist darauf zu achten, dass Backslashes im regulären Ausdruck durch doppelte Backslashes ersetzt werden müssen (bspw. ^\w+$ -> ^\\w+$). Zudem wird nicht zwischen Groß- und Kleinschreibung unterschieden – ist also case insensitive.

Die Funktion lässt sich auch für CSS einsetzen:
[sourcecode language=“jscript“]
// Wähle alle Elemente mit einer Weite zwischen 100 und 300 aus:
$(‚:regex(css:width, ^[1-3]\\d{2}px$)‘);

// Wähle alle DIVs aus, die NICHT als Block angezeigt werden:
$(‚div:not(:regex(css:display, ^block$))‘);
[/sourcecode]