Can CSS Target HTML Elements Based on Any Attribute Value?

Targeting HTML Elements with Any Attribute Value in CSS

In CSS, it is possible to target elements based on specific attributes, as illustrated in the example below:

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

However, a common question arises: can elements be targeted based on any attribute value? This article explores this topic.

Using the Attribute Selector

To target elements with any attribute value, the attribute selector can be employed. By omitting the value after the attribute name, all elements with that attribute are selected. For instance:

a[rel] {
    color: red;
}

With this rule, the provided HTML snippet would style the first and third tags in red:

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

This behavior mirrors the default cursor: pointer style applied to tags with defined href attributes.

Handling Empty Attribute Values

In certain cases, it may be necessary to distinguish between empty and non-empty attribute values. This can be achieved using the :not pseudo-class in conjunction with the attribute selector:

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

This rule targets all anchor tags with a rel attribute, excluding those where the value is empty (i.e., no value is specified).

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