The CSS Attribute Value Selectors select HTML Elements with a specified attribute and value. There are 6 types of CSS Attribute Value Selectors.
Table of Contents
Example of CSS Attribute Value Selectors
Square brackets are also used while using CSS Attribute Value Selectors.
The following example will only select anchor elements with target='_blank'.
a[target='_blank'] {
background-color: red;
}
The following example will only select paragraph elements with align='left'.
p[align='left'] {
font-size:20px;
}
Types of CSS Attribute Value Selectors
There are 6 different types of CSS Attribute Value Selectors which are used for different purposes.
CSS [attribute="value"] Selector
The CSS [attribute="value"] Selector is used to select HTML elements with a specified value of a specified attribute.
input[type="text"] {
color:white;
font-size:20px;
background-color: red;
}
In this example only input element with type = "text" are being targeted.
CSS [attribute|="value"] Selector
The CSS [attribute|="value"] Selector is used to select elements with the specified attribute whose value is starting with a specified word.
[class|="main"] {
color:red;
}
This selector will select all html elements with a class attribute whose value starts with word "main". The value should either be exactly 'main' or any other word joined with 'main' using hyphen, for example, 'main-img'.
CSS [attribute~="value"] Selector
The CSS [attribute~="value"] Selector is used to select elements with a specified attribute whose value contains a specified word.
[title~="image"] {
border: 5px solid yellow;
}
The above example will select all html elements whose title attribute value has a word 'image' in it. It will select elements with title='image', title='main image', title='image size', but not title='main-image' or title='image-main' or title='images'.
CSS [attribute$="value"] Selector
The CSS [attribute$="value"] Selector is used to select html elements with a specified attribute whose value ends with a specified word.
[title$="image"] {
width:200px;
}
This will select all html elements whose title attribute value ends with word 'image', for example it will select title='mainimage', title='main-image', title='main_image' and title='image' but not title='main'.
CSS [attribute^="value"] Selector
The CSS [attribute^="value"] Selector is used to select those html elements with a specified attribute whose value starts with a specified word.
[title^="image"] {
color:blue;
}
This will select all html elements whose title attribute value starts with word 'image', for example it will select title='imagemain', title='image-main', title='image_main' and title='image' but not title='main'.
CSS [attribute*="value"] Selector
The CSS [attribute*="value"] Selector is used to select html elements with a specified attribute whose value contain a specified word, in the start, middle or in the end.
[title*="im"] {
padding:20px;
}
This example will select all elements with a title attribute whose value contains "im". It will select title='image', title='im', title='mainimage', title='main-image', title='main_image' but not title='main'.