Attribute Selectors: using wildcards inside attribute value

using href attribute to style certain links

[Darkelve]

With CSS, I am trying to style certain links depending on their attribute, with good success. However, I am wondering if it is possible to use wildcards in the attribute value. E.g the following code:

a[href="*pdf"] {
color: red;
}

doesn't seem to work. Is it possible to do something like this?

Thanks,

Darkelve

[SuzyUK]

try this..
a[href*="pdf"] or a[href$="pdf"]

I can't find an official source of all this info in one place but here's a summary:

Select all by attribute

a[title] { styles }

This targets any <a> element which has title attribute, no matter what the tile is.

Select exact match attribute

a[title="mytitle"] { styles }

This selects only <a> elements where the title attribute exactly matches "mytitle"
e.g. <a href="/" title="mytitle" >Link Text</a>

Select match at the beginning of the attribute

a[title^="mytitle"] { styles }

This selects only <a> elements where the title attribute starts with "mytitle"
e.g. <a href="/" title="mytitle is this" >Link Text</a>

Select match at the end of the attribute

a[title$="mytitle"] { styles }

This selects only <a> elements where the title attribute ends with "mytitle"
e.g. <a href="/" title="this is mytitle">Link Text</a>

Select match somewhere in the attribute

a[title*="mytitle"] { styles }

This selects only <a> elements where the title attribute contains "mytitle"
e.g. <a href="/" title="this is what mytitle is" >link text</a>

Suzy

[Darkelve]

Thanks a lot, Suzy! :-)

I used this selector to place a PDF icon (34px wide) in every url ending in 'pdf', thus with a pdf extension. And I added some padding so it would go right before the link:

a[href$="pdf"] {
padding-left: 38px;
background:url(../img/pdflogo_new.gif) no-repeat;
}

While this solution is quite satisfactory, I wonder if it's possible placing it to the right of the link.

The more I learn about CSS, the more I come to realize how ingenious it is... too bad not everyone uses the full potential of it yet.

Edit: also, I realize this approach 'hides' some information for our disabled users. I was wondering if I could use a certain style rule for 'aural' stylesheets, to inform them the link is a PDF? Sorry if this sounds strange, I don't know much about aural stylesheets, but maybe they could be a help.

Edit 2: this doesn't seem to work in internet explorer (6.0)!?

[createErrorMsg]

this doesn't seem to work in internet explorer

Those selectors are part of the CSS3 specs. IE does not support them.

cEM

[Darkelve]

Shucks... how disappointing.

Well, at least I know now. I guess...

[SuzyUK]

While this solution is quite satisfactory, I wonder if it's possible placing it to the right of the link.

it sure is, perhaps using the :before and :after [w3.org] pseudo elements properties along with generated content property [w3.org] would be better though to avoid "hiding".

e.g.
a[href$="pdf"]:after {
content: " "open-quote "pdf link" close-quote" ";
}

You can put your image in there like this..
a[href$="pdf"]:after {
content: url(pdficon.gif);
}

I was wondering if I could use a certain style rule for 'aural' stylesheets, to inform them the link is a PDF? Sorry if this sounds strange, I don't know much about aural stylesheets, but maybe they could be a help.

Suuport for aural properties is not very good, but the equivalent to generated content would perhaps be the Cue Properties [w3.org] where you would cue in a sound perhaps to indicate that it's a pdf link.. quite how this is supported and how you would intimate to the listener what the sound for a pdf would be I have to confess to not knowing too much either. Lack of/differing support for Aural styles by the different UA's mean there is not a reliable standard yet afaik anyway.

Edit 2: this doesn't seem to work in internet explorer (6.0)!?

Well you didn't expect it to work in IE really did you ;) - It doesn't work unless you want to work with Dean Edwards IE7 [dean.edwards.name].

Seriously though this explains why there is not wider use of these advanced selectors either your attribute selectors or the generated content. At the minute they are only good for adding nicer effects for compliant browsers, they can't be relied upon to convey any necessary information :(

Suzy

[Darkelve]

"Well you didn't expect it to work in IE really did you ;) - It doesn't work unless you want to work with Dean Edwards IE7."

;) Funny, but I *did*. I always test in Firefox first (as its my fav. browser, plus Chris Pedericks Web Developer Toolbar is excellent) and lo-and-behold, it worked immediately there... crazy of me to think it would work right away in IE also, I know.

I don't think the IE7 approach is a 100% reliable approach... since Javascript is obligatory. Although it's certainly interesting and worth a look.

I read CSS complaints and CSS wishlists all the time on the web, as well from external developers as from internal (IE blog, channel9 msdn network, ...). Still there does not seem to be much movement in this area...