Advertisement

Advertisement


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 Value Attribute Selector

CodeRepublics


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

Example of attribute selector

Download PDF










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.