How Can I Style Elements with Attributes of Any Value in CSS?

Targeting Elements with Attributes of Any Value in CSS

CSS offers the ability to target elements with specific attributes, such as input[type=text]. However, can we extend this to elements with attributes of any value?

The Challenge

You want to style elements that have an attribute with any value (excluding those with no attribute). For instance, you might aim to highlight anchor tags with a defined rel attribute.

The Solution

To accomplish this, use the following syntax:

a[rel]
{
    color: red;
}

This rule will match any anchor tag () that has a rel attribute, adding the specified styling.

Handling Empty Values

However, the above rule will also match elements with empty rel attributes. To exclude these, incorporate the :not pseudo-class:

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

This will style anchor tags with non-empty rel attributes, addressing the issue pointed out by vsync.

The above is the detailed content of How Can I Style Elements with Attributes of Any Value in CSS?. For more information, please follow other related articles on the PHP Chinese website!