How do I target elements with an attribute that has some meaning in CSS?

Question

I know that I can customize elements that have a specific attribute in CSS, for example:

input[type=text] { font-family: Consolas; } 

But is it possible to target elements that have an attribute of any value (except for nothing, for example, when the attribute was not added to the element)?

Roughly something like:

 a[rel=*] { color: red; } 

which should target the first and third <a> tags in this HTML:

 <a href="#" rel="eg">red text</a> <a href="#">standard text</a> <a href="#" rel="more">red text again</a> 

I believe this is possible because, by default, cursor: pointer is applied to any <a> tag that has a value for its href attribute.

Answer 1

The following will match any anchor tag with a specific rel :

 a[rel] { color: red; } 

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

---

Update: in order to take into account the mentioned @vsync script, in the comments section (distinguishing emtpy / non-empty values), you can include CSS :not pseudo-class :

 a[rel]:not(a[rel=""]) { color: red; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

Yes, there are several attribute selectors in CSS 3 selectors .

eg.

[ATT] Represents an element with the attribute att, regardless of the value of the attribute.

[ATT = value] Represents an element with the attribute att whose value is "val".

[ATT ~ = value] Represents an element with the att attribute, whose value is a list of words separated by spaces, one of which is exactly "val". If "val" contains spaces, it will never represent anything (since words are separated by spaces). Also, if "val" is an empty string, it will never represent anything.

[ATT ^ = value] Represents an element with the attribute att, the value of which begins with the prefix "val". If "val" is an empty string, then the selector does not represent anything.

[ATT $ = value] Represents an element with the attribute att whose value ends with the suffix "val". If "val" is an empty string, then the selector does not represent anything.

[ATT * = value] Represents an element with the attribute att whose value contains at least one instance of the substring "val". If "val" is an empty string, then the selector does not represent anything.

Answer 3

It should be added that if the browser sets the default attribute, you may need a workaround. This doesn't seem to be a problem in “modern” browsers, but it is a problem that I have encountered, so be sure to check the performance in different browsers.

For example, I found that in IE up to 9 colSpan is set for all TDs in the table, so any single cell has a hidden colspan of 1.

Therefore, if you are targeting "any TD with the colspan attribute" that you use in your web document, even td that does not have the colspan attribute set, for example, any TD that is a separate cell will get a CSS style. IE less than 9 will be basically their style!

The only reason for concern about this is all other XP users who cannot upgrade above IE8.

For example, I have a group of tables whose contents can change from end to end, leaving 1 to 7 cells empty at the end or at the beginning.

I want to apply color to any empty cells at the end or beginning using the colspan attribute. Using the following will not work in IE less than 9

 #my td[colspan] {background-color:blue;} 

... all TDs will be stylized (funny, since styling conditional attributes in IE is supposedly better, but I digress ...).

Using the following works in all browsers when I set the colspan value to 'single' for any single cell / TD that I want to include in the stylesheet, however this is a “hack” and will not be checked correctly ...

 #my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */ #my td[colspan="2"] {background-color:blue;} #my td[colspan="3"] {background-color:blue;} #my td[colspan="4"] {background-color:blue;} #my td[colspan="5"] {background-color:blue;} #my td[colspan="6"] {background-color:blue;} #my td[colspan="7"] {background-color:blue;} 

Alternatively, you should be able to more adequately solve the problem using conditional styles, using "if lt IE 9" to override. That would be the right way to do this, just keep in mind that in the process you have to hide the “properly built CSS” from IElt9, and I think that the only right way to do this is with custom stylesheets.

In any case, most of us are already doing this, but nevertheless, you should still think and check if the browser uses an auto-attribute when it does not see it, and how it can process your rest of the syntax to style the attribute values.

(By the way, colspan is simply not yet specified in the css specification [as of css3], so in this example, a validation error is not generated.)