Search⌘ K

Attribute selectors

Explore how CSS attribute selectors let you target HTML elements based on their attributes and values. Understand different attribute matching operators and their effects to style links, images, and text with precision. This lesson enables you to enhance your web pages with conditional and specific styling using attribute selectors.

CSS provides selectors to format a tag based on any HTML attributes it has. Maybe, you want to style links according to the pages they point to or set a border around highlighted images. This extra information used to set up the appropriate styles can be based on attribute values. Attribute selectors can be specified with one of the following expressions:

NAME_
CSS
selector[attr]
selector[attr operator "value"]

In this notation, the selector identifies any selector (tag, class, ID, or other), attr names the attribute that should be compared to the specified value.

If only the attr tag is specified, the selector matches with all tags within the selector that have an attribute named attr. If an operator is specified, the attribute is checked against ...