CSS Attribute Selectors

The CSS Attribute Selectors select or target HTML Elements based on their attribute or they only select html elements with a specified attribute.

Square brackets are also used while using CSS Attribute Selector.

Table of Contents

Example of CSS Attribute Selector

The following example will only select anchor elements with title attribute.

a[title] {
color: red;
}

The following example will only select paragraph elements with align attribute.

p[align] {
font-size:20px;
}

The best thing about CSS Attribute Selector is that they can be used to select HTML Form elements without making their id or classes.

input[type="text"] {
color:white;
font-size:20px;
background-color: red;
}

In this example the input element with type = "text" are being targeted. The text type input element is written as follow.

<input type="text">

This concept of using both attribute and it's value as CSS selector is also explained separately, it is known as CSS Attribute Value Selector.