CSS Attribute Selectors
The CSS attribute selectors helps us to apply CSS on elements having a particular attribute or attribute value specified.
The syntax of using attribute selectors in various ways is given below with examples, have a look at them:
CSS [attribute] Selector
The [attribute] selector selects the element which uses the specified sttribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Attribute Selector </title>
<meta charset="UTF-8">
<style>
[title] {
color:green;
}
</style>
</head>
<body>
<h1 title="heading">Attribute Selector</h1>
<p title="paragraph">The color of this paragraph will be red.</p>
</body>
</html>
Output
CSS Attribute Selector
Attribute Selector
The id of this paragraph will be red.
CSS [attribute="value"] Selector
The = operator is used to select element whose attribute value matches with the given value:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Value Attribute Selector </title>
<meta charset="UTF-8">
<style>
input[type="text"] {
border:1px solid green;
}
input[type="submit"] {
border:1px solid green;
}
</style>
</head>
<body>
<form action="https://coderepublics.com">
<input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
CSS Value Attribute Selector
CSS [attribute~="value"] Selector
The ~= operator is used to select an element whose attribute value's list of space-separated values, matches the given value. It means that if there are more than one value specified for an attribute then the CSS will be applied to those elements where any one value matches the given value.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Value Attribute Selector </title>
<meta charset="UTF-8">
<style>
[class~="warning"] {
color: #fff;
background: #2984a9;
padding:10px;
}
</style>
</head>
<body>
<p class="warning">The style will apply to this paragraph.</p>
<p class="warning success">The style will also apply to this paragraph.</p>
<p class="Success">The style will not apply to this paragraph.</p>
</body>
</html>
Output
CSS Value Attribute Selector
The style will apply to this paragraph.
The style will also apply to this paragraph.
The style will not apply to this paragraph.
CSS [attribute^="value"] Selector
The ^= operator is used to select any element whose attribute value starts with a given value. It does not have to be a whole word, it can be just the the starting characters of the word.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Value Attribute Selector </title>
<meta charset="UTF-8">
<style>
a[href^="https://"] {
background-color: green;
padding: 12px 15px 12px 15px;
border-radius: 5px;
margin: 10px;
color: white;
font-size: 18px;
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="https://coderepublics.com" target="_blank">CodeRepublics</a></p>
</body>
</html>
Output
CSS [attribute|="value"] Selector
The |= operator is used to select any element whose attribute value starts with a given value and it has to be a whole word or has a hyphen-separated list of values beginning with the given value.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Value Attribute Selector </title>
<meta charset="UTF-8">
<style>
p[lang|=en] {
color: #fff;
padding:10px;
background: gray;
}
</style>
</head>
<body>
<p lang="en">The style will apply to this paragraph.</p>
<p lang="en-us">The style will also apply to this paragraph.</p>
<p lang="us">The style will not apply to this paragraph.</p>
</body>
</html>
Output
CSS Value Attribute Selector
The style will apply to this paragraph.
The style will also apply to this paragraph.
The style will not apply to this paragraph.
CSS [attribute*="value"] Selector
The *= operator is used to select an element whose attribute value contains a specified value. It selects all the elements with a class attribute value equal to the given value. It doesn't have to be a whole word.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Value Attribute Selector </title>
<meta charset="UTF-8">
<style>
[class*="warning"] {
color: #fff;
padding:10px;
background: seagreen;
}
</style>
</head>
<body>
<p class="warning">The style will apply to this paragraph.</p>
<p class="warning">The style will also apply to this paragraph.</p>
<p class="warning">The style will also apply to this paragraph.</p>
<p class="warning">The style will also apply to this paragraph.</p>
<p>The style will not apply to this paragraph.</p>
</body>
</html>
Output
CSS Value Attribute Selector
The style will apply to this paragraph.
The style will also apply to this paragraph.
The style will also apply to this paragraph.
The style will also apply to this paragraph.
The style will not apply to this paragraph.
CSS [attribute$="value"] Selector
The $= operator selects the elements whose attribute value ends with a given value. It doesn't have to be a whole word.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute selector</title>
<style>
a[href$=".pdf"] {
padding:10px 10px 10px 10px;
background-color:pink;
border-radius:10px;
}
</style>
</head>
<body>
<p><a href="../tryit/Google.pdf">Download PDF</a></p>
</body>
</html>
Output