How Can I Target CSS Elements with Any Attribute Value?

Targeting Elements with Attributed Values in CSS

CSS enables developers to select specific elements based on attributes. While targeting elements with a predefined attribute value is straightforward, extending this to any attribute value can prove challenging.

Problem Statement

Can we select elements with any attribute value, similar to:

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

This selector should match the following HTML:

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

Solution

To target any non-empty attribute value, use the following selector:

a[rel]
{
    color: red;
}

This selector will match all anchor tags with the 'rel' attribute.

Handling Empty Values

However, if the requirement is to differentiate between empty and non-empty attribute values, introduce the CSS ':not' pseudo-class:

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

This selector will select anchor tags with a 'rel' attribute that is not empty.

Additional Note

By default, HTML anchor tags with an 'href' attribute have a 'cursor: pointer' style applied. This feature highlights the possibility of selecting elements based on the presence of any attribute value.

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