CSS Attribute Selector
The CSS attribute selector is used when we want to style multiple HTML elements that have the same attribute or attribute values. It is a very convenient way to style multiple-element by grouping them on a basis of similar attributes. The attribute selector selects all the elements that have a particular attribute and sets the styling for all of them. The attribute selectors are by default case sensitive and can be written in the square brackets [].
Types of attribute selector
There are several types of attribute selector, which are given below:
- CSS [attribute] selector
- CSS [attribute="value"] selector
- CSS [attribute~="value"]
- CSS [attribute|="value"]
- CSS [attribute^="value"]
- CSS [attribute$="value"]
- CSS [attribute*="value"]
CSS [attribute] selector
The [attribute] selector selects all the elements that contain the same attribute and applies the CSS properties to all of them at once. For example, the .selector [class] will selects and style all the elements that have the same class name.
Syntax of [attribute] selector
HTML element[attribute]/[attribute]{
/* CSS properties*/
}
Example: Applying [attribute] selector
In the given example, we have created four paragraphs using the <p> element. In the first and last paragraph, we have specified the class attribute along with its value para then we have specified the CSS properties using the CSS [attribute] selector for the <p> element having the class attribute.
<!DOCTYPE html>
<html>
<head>
<title>Attributes selector</title>
<style>
[class] {
background-color: red;
color: black
}
</style>
</head>
<body>
<p class="para">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p class="para">This is the forth paragraph.</p>
</body>
</html>
Output:
As we can see in the output image, para first and fourth having the background color to red this is because these two paragraphs consist of the class attribute.
CSS [attribute="value"] selector
This [attribute="value"] selector allows us to select and set styling properties to all the elements whose attribute value is the same as the assigned value.
Syntax of [attribute="value"] selector
HTML element [attribute="value"] {
/* CSS property*/
}
Example: Applying CSS [attribute="value"] selector
In the given example, we have created four paragraphs using the <p> element and specify the class attribute for each <p> element. Now we assigned the value of the class attribute with the help of the [attribute = "value"] selector. This selector selects the class whose value is the same as the selector's class value and sets CSS properties for those classes only.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
p[class="para"] {
background-color: yellow;
}
</style>
</head>
<body>
<p class="para">This is the first paragraph.</p>
<p class="test">This is the second paragraph.</p>
<p class="para">This is the second paragraph</p>
<p class="test">This is the forth paragraph</p>
</body>
</html>
Output:
CSS [attribute~="value"] selector
The CSS [attribute~="value"] selector allows us to set CSS properties to all the elements whose value contains a specified word.
Syntax of [attribute~="value"] selector
[attribute~="value"] {
/* CSS property */
property: value;
}
Example: Applying [attribute~="value"] selector
In this example, we have specified the class attribute for all four paragraphs. Then, we have specified the value of the class attribute for the first and third paragraph to para and for the second and fourth paragraph to test. We specified the CSS property border with the value of 2px solid red using the attribute selector [class="test"]. Now the CSS specified CSS property is accepted by only those paragraphs whose value of the class attribute is test.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
[class~="test"] {
border: 2px solid red;
}
</style>
</head>
<body>
<p class="para">This is the first paragraph.</p>
<p class="test">This is the second paragraph.</p>
<p class="para">This is the second paragraph</p>
<p class="test">This is the forth paragraph</p>
</body>
</html>
Output:
As we can see in the output, the CSS property is applied to an only the second and fourth paragraph because these two paragraphs have the value of the class attribute to test.
CSS [attribute|="value"] selector
The CSS [attribute|="value"] selector is used to select the elements with specified attribute which start with the particular value.
Syntax of CSS [attribute|="value"] selector
[attribute|="value"] {
/*CSS property*/
}
Example of CSS [attribute|="value"] selector
In the given example we have created four paragraphs using the <p> tag and we have specified class attribute along with the values. Then using CSS [class|="para"] we specified the CSS property border with the value 2px solid red.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
[ class|="para"] {
border: 2px solid red;
}
</style>
</head>
<body>
<p class="para-1">This is the first paragraph.</p>
<p class="para-2">This is the second paragraph.</p>
<p class="para-3">This is the second paragraph</p>
<p class="test">This is the forth paragraph</p>
</body>
</html>
Output:
As we can see in the output image, only the first three paragraphs having a border. This is because we have specified the value of the attribute selector to para which is a specified part of the class attribute. So this particular word matches with the first three paragraphs and the CSS properties can be accepted by them only.
CSS [attribute^="value"] selector
The CSS [attribute^="value"] is used to select a value whose attribute value begins with a particular value.
Syntax of CSS [attribute^="value"] selector
[attribute^="value"] {
/* CSS property*/
}
Example: Applying CSS [attribute^="value"] selector
In this example, we have specified the CSS properties using [class^="test"] instead of any element selector. So we have specified the CSS property border with value 2px solid yellow for the elements having the value of the class attribute to test and the border property with value 2px solid red for the class attribute having value para.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
[class^="test"] {
border: 2px solid yellow;
}
[class^="para"] {
border: 2px solid red;
}
</style>
</head>
<body>
<p class="test-1">This is the first paragraph.</p>
<p class="para-1">This is the second paragraph.</p>
<p class="test-2">This is the second paragraph</p>
<p class="para-2">This is the forth paragraph</p>
</body>
</html>
Output:
As we can see on the output image, the first and third paragraphs have a yellow-colored border and the second and fourth paragraphs have a red-colored border.
CSS [attribute$="value"] selector
The CSS [attribute$="value"] selector selects the element whose attribute value ends with the particular value.
Syntax CSS [attribute$="value"] selector
[attribute$="value"] {
/* CSS properties*/
}
Example CSS [attribute$="value"] selector
In the given example we have specified the CSS border property for the <p> element using the attribute selector [attribute$="value"] whose class attribute value should contain 1.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
[class$="1"] {
border: 2px solid yellow;
}
</style>
</head>
<body>
<p class="test-1">This is the first paragraph.</p>
<p class="para-1">This is the second paragraph.</p>
<p class="test-2">This is the second paragraph</p>
<p class="para-2">This is the forth paragraph</p>
</body>
</html>
Output:
As we can see on the output image, border property is applied to only the first and second paragraphs this is because the value of the class attribute must contain 1 in their name.
CSS [attribute*="value"] selector
The [attribute*="value"] selector selects the element in which the attribute value contains a specified value.
Syntax CSS [attribute*="value"] selector
[attribute*="value"]{
/*CSS property*/
}
Example: Applying [attribute*="value"] selector
In the given example we specified the CSS property border with a value of 2px solid yellow using the [attribute*="value"] selector. So in this attribute selector, we have to specify the specific part of the attribute value, not the whole value. As we can see in the given code we have specified the value of the class attribute to te. This will select the class attribute whose value consists of te prefix.
<!DOCTYPE html>
<html>
<head>
<title>CSS attribute selector</title>
<style>
[class*="te"] {
border: 2px solid yellow;
}
</style>
</head>
<body>
<p class="test-1">This is the first paragraph.</p>
<p class="para-1">This is the second paragraph.</p>
<p class="test-2">This is the second paragraph</p>
<p class="para-2">This is the forth paragraph</p>
</body>
</html>
Output:
As we can see in the output, the CSS property is applied to the first and third paragraph only because the value of the class attribute of these paragraph consists of the prefix te.
Conclusion
In this lesson, we have learned CSS attributes and we have also learned how to specify CSS using following attribute selectors which are given below:
- CSS [attribute] selector
- CSS [attribute="value"] selector
- CSS [attribute~="value"]
- CSS [attribute|="value"]
- CSS [attribute^="value"]
- CSS [attribute$="value"]
- CSS [attribute*="value"]
