"contains" in CSS attribute selectors

[brothercake]

It's a long shot this one ... but is there any way to specify attribute selectors using wildcards or regex. So:

E[foo="warning"]

matches any E element whose foo attribute equals "warning"; but I want it to match elements whose foo attribute *contains* or *does not contain* a string

[jkd]

http://www.w3.org/TR/css3-selectors/#attribute-substrings

Mozilla implements many CSS3 selectors, including those.

[jkd]

Oh, and to answer your question:

E[foo*="bla"] {
/* E elements w/ foo attributes containing bla */
}

E:not([foo*="bla"]) {
/* E elements w/o foo attributes containing bla */
}

[brothercake]

Wicked :D :thumbsup:

I shall have to read-up on CSS3 this weekend ..

[Quiet Storm]

Wow. That's cool.

Useful, I think... :D

I'll have to look into it, too. Anyone know where I can download ALL information on CSS (to save to floppy)?

[jkd]

Originally posted by Quiet Storm
Wow. That's cool.

Useful, I think... :D

I'll have to look into it, too. Anyone know where I can download ALL information on CSS (to save to floppy)?

Very cool.

Very useful. The :not() pseudo-class in particular. I've used it often in conjunction with XML applications inside of each other. Example:

@namespace svg url(http://www.w3.org/2000/svg);

svg|svg:root {
/* automatically center document if it is SVG at root */

margin: 0 auto;
}

svg|svg:not(:root) {
/* inline SVG, style it specially or something */
}


As for information on all CSS... I'm not aware of any zipped archive of the CSS3 publications, but CSS1 and CSS2 are both available as a zip or pdf from W3C's site.

[Quiet Storm]

Thanks!

And this all works on (don't laugh) IE5.0+?

[jkd]

Originally posted by Quiet Storm

And this all works on (don't laugh) IE5.0+?

Sorry. hahahahahahahahahahah.... no. Of course not. Win/IE doesn't even support any CSS2 selectors other than the descendant (the space) selector, let alone anything from CSS3.

[jkd]

It also appears that Hyatt has been implementing some more nifty CSS3 selectors in Safari:
http://www.mozillazine.org/weblogs/hyatt/archives/2003_03.html#002644

:)

[brothercake]

rock on :D

[brothercake]

I'm posting this follow up for general interest, to demonstrate what I did with this. It's actually rather useful :)

Basically, I wanted to make a print stylesheet with exploded URLs - so that when you print the page, each link is followed by its URL in brackets. But ... there are three types of link on the site; internal links:

<a href="/folder/page.html">page</a>

external links:

<a href="http:///www.othersite.com/">other site</a>

and target anchors:

<a name="here" id="here"></a>

So - I want the internal links to have their domain name prepended, but external links should stay as they are. I also want to make sure that target anchors aren't written at all - otherwise there'd be loads of empty brackets on the page.

Phew. Long explanation ... for a short piece of code:

a[href*="."]:not([href*="http://"]):after {
content:" (http://www.domain.com" attr(href) ")";
}

a[href*="http://"]:after {
content:" (" attr(href) ")";
}

which produces this printed text:

page (http://www.domain.com/folder/page.html)

other site (http://www.othersite.com/)

:D

[jkd]

And this is why I love Mozilla? :)
Safari on Hyatt's box should be able to do that too... you can't help but love the advent of CSS2 and CSS3 aware browsers. :)

[brothercake]

It's fantastic with a capital tastic :)

[theabyss]

Or in drop caps and small caps using CSS :D

[jkd]

Originally posted by theabyss
Or in drop caps and small caps using CSS :D

You dug up a 5 month-old thread just to say that? :)

[theabyss]

Oops :o

Didn't realize what the dates were. I'm such a ditz :o :o :o

[brothercake]

Originally posted by theabyss
Or in drop caps and small caps using CSS :D
So something like:

<p>It's fan<em>tastic</em>.</p>

And then:

p em {
font-style:normal;
font-variant:small-caps;
}

:D

[theabyss]

That's funny! :thumbsup:

What about the drop cap??? :p

[brothercake]

Originally posted by theabyss
What about the drop cap??? :p

p:first-letter { font-size:larger; }

:thumbsup: