CSS ATTRIBUTE SELECTOR


CSS styles can be applied on HTML elements based on specific attributes or their values.


CSS [attribute] Selector


The [attribute] selector is used to select elements having a specified attribute. The following example will set the color of <p> tag that is having a title, to blue:


<!DOCTYPE html>
<html>
<head>
<style>
p[title] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>
<p title="CSS Attributes">Only this will get styled</p>
<p>Style will not apply</p>

</body>
</html>
Live Demo!


Output:

CSS [attribute] Selector

Only this will get styled

Style will not apply


This example selects all <p> elements with a title attribute.


Attribute selectors are of various types:


CSS [attribute="value"] Selector


The [attribute="value"] selector is used to select elements having a specified attribute & the specified value.

The following example will set the color of input type="number" to blue:


<!DOCTYPE html>
<html>
<head>
<style>
input[type="number"] {
  color: blue;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>
<input type="text" name="first" value="test">
<input type="number" name="second" value="0">  <!-- This will get styled -->

</body>
</html>
Live Demo!


Output:

CSS [attribute="value"] Selector



CSS [attribute|="value"] Selector


This selector is used to select elements with the specified attribute starting with the specified value. The value given to the attribute should be a whole word, either alone, like class="first", or followed by a hyphen( - ), like class="first-text".


For example:


[class|=first] {
  background-color: orange;
}
Live Demo!

In this example, it selects all elements with a class attribute value that begins with "first".


CSS [attribute~="value"] Selector


This selector is used to select elements with an attribute value containing a specified word. For example: 


<!DOCTYPE html>
<html>
<head>
<style>
[class~=danger] {
  border: 5px solid red;
}
</style>
</head>
<body>

<p>All elements with the class attribute containing the word "danger" get a red border.</p>
<h2 class="warning danger">This will get styled</h2> <!--This will get a border -->
<h4 class="danger">This will get styled</h2> <!--This will also get a border -->
<h6 class="warning">This will not get styled</h2>

</body>
</html>
Live Demo!


Output:

All elements with the class attribute containing the word "danger" get a red border.

This will get styled

This will get styled

This will not get styled

The example above will match all elements with "danger" in their class attribute.



CSS [attribute^="value"] Selector


This selector is used to select elements whose attribute value ends with a specified value. The value given to the attribute does not have to be a whole word.

For example:


[class$="test"] {
  background: yellow;
}
Live Demo!

This example selects all elements with a class attribute value that ends with "test".


CSS [attribute*="value"] Selector


This selector is used to select elements whose attribute value contains a specified value. The value passed to the attribute does not have to be a whole word.

For Example:


[class*="te"] {
  background: yellow;
}
Live Demo!

This example selects all elements with a class attribute value that contains "te".