Table of Contents
CSS Attribute Selectors
- The Attribute selectors select elements based on an attribute or attribute value.
[attribute]
- This selector is used to select elements with a specified attribute.
Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a[target]{
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with a target attribute gets a yellow background:</p>
<a href="https://www.youtube.com/c/nielitbhu">NIELITBHU</a><br>
<a href="https://www.sarkariresult.com" target="_blank">sarkariresult.com</a><br>
<a href="https://www.wikipedia.org" target="_top">wikipedia.org</a><br>
<a href="https://www.google.com" target="_top">google</a><br>
<p><b>Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared</p>
</body>
</html>[attribute="value"]
- This selector is used to select elements with a specified attribute and value.
Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a[target=_blank]{
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with a target attribute gets a yellow background:</p>
<a href="https://www.youtube.com/c/nielitbhu">NIELITBHU</a><br>
<a href="https://www.sarkariresult.com" target="_blank">sarkariresult.com</a><br>
<a href="https://www.wikipedia.org" target="_top">wikipedia.org</a><br>
<a href="https://www.google.com" target="_blank">google</a><br>
<p><b>Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared</p>
</body>
</html>[attribute~="value"]
- This selector is used to select elements with an attribute value containing a specified word.
Example
<!DOCTYPE html>
<html>
<head>
<style>
[title~=image] {
border: 5px solid blue;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] selector</h2>
<img src="https://nielitbhu.com/image.jpg" title="image" width="250" height="200">
<img src="https://nielitbhu.com/image.jpg" title="images" width="200" height="150">
<img src="https://nielitbhu.com/new logo" title="logo" width="150" height="100">
</body>
</html>[attribute|="value"]
- This selector is used to select elements with the specified attribute starting with the specified value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="content">Are you learning CSS?</p>
</body>
</html>
[attribute^="value"]
- This selector is used to select elements whose attribute value begins with a specified value.
Note: The value does not have to be a whole word!
Example
<!DOCTYPE html>
<html>
<head>
<style>
div[class^="test"] {
background: yellow;
}
</style>
</head>
<body>
<div class="first_test">Hello.</div>
<div class="second">Welcome</div>
<div class="test">The third test div element.</div>
<div class="test_try">The fourth test div element.</div>
<p class="test">This is a paragraph.</p>
<p class="test_try">This is a paragraph.</p>
</body>
</html>
[attribute$="value"]
- This selector is used to select elements whose attribute value ends with a specified value.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div[class$="test"]{
background: yellow;
}
</style>
</head>
<body>
<div class="first-test">My first test</div>
<div class="second">My second test</div>
<div class="My-test">My test third</div>
<p class="test">This is a paragraph.</p>
</body>
</html>[attribute*="value"]
- This selector is used to select elements whose attribute value ends with a specified value.
Note: The value does not have to be a whole word!
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
[class*="te"]{
background: yellow;
}
</style>
</head>
<body>
<div class="first-test">My first test</div>
<div class="second">My second test</div>
<div class="My-test">My test third</div>
<div class="mytest">My test fourth</div>
</body>
</html>