How Can I Style Elements with Attributes of Any Value in CSS?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-11-26 12:51:10

Original

659 people have browsed it

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;
}

Copy after login

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;
}

Copy after login

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!