Hi,
Examples of the Attribute Presence Selector always seem to use the title attribute:
a[title] {color: red;}
Are there any other meaningful attributes that can be used?
Cheers,
simon
See reference.sitepoint.com/css/attributeselector
A common one is [type=…], which you can use to style different types of <input> without the need to use classes. I’ve also used img[src=…] to style a particular image wherever it appears, and [colspan]/[rowspan] to style spanning cells.
A note on these:
I’ve notices that sometimes elements HAVE attributes by default but are not explicitly written in the HTML… for example, if you have an input and you do not state
type=“text” (or any type at all)
the default is text. However, you may not be able to select that input with input[type=“text”].
Similarly an <img> tag calling a file that’s 400px wide may not be selected with img[width=“400”] unless it’s explicitly in the HTML. So just make sure that you’re explicitly stating anything you want to use. Also, it appears that fake attributes will work: input foo=“bar” should allow you to do input[foo] or input[foo=“bar”] (maybe not cross-browser).
To see where this could actually have a use, here are some ideas:
Titles generally only appear to folks with mice. Suppose you had titles on anchors that you wanted available to keyboarders?
<a href=“somewhere” title=“foo bar”>some link</a>
a[title]:focus:after {
content:“\0A” attr(title);
styles;
}
Of course you’d want to only have this appear on :focus alone, so you’d follow that up with
a[title]:hover:focus:after {
content:“”;
}
Or you could make all external links have a little icon indicating it’s external (assuming internals are relative url’s):
<a href=“http://somewhere else”>somewhere</a>
.tekst a[href^=“http”] {
padding-right: 15px;
background: url(external.png) 100% 50% no-repeat;
}
or pdf’s, or whatever. Some ideas.
Thanks very much, there are some very interesting ideas there, I hadn’t thought of using image dimensions as a presence attribute.
simon