- In CSS (Cascading Style Sheets), an attribute selector is a way to select HTML elements based on the presence or value of their attributes. Attribute selectors provide a powerful tool for targeting specific elements and applying styles to them.
- There are several types of attribute selectors, each with its own syntax and usage. Let's explore them with examples:
Presence Attribute Selector:
- This selector targets elements that have a specific attribute, regardless of its value. It uses the square brackets `[attribute]` notation. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Select all input elements with the "required" attribute */
input[required] {
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<input type="text" required>
<input type="number" required>
<input type="text">
</div>
</body>
</html>
- In this example, all input elements with the `required` attribute will have a red border.
Value Attribute Selector:
- This selector targets elements that have a specific attribute with a specific value. It uses the notation `[attribute=value]`. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Select all anchor elements with the "target" attribute set to "_blank" */
a[target="_blank"] {
color: green;
}
.anch[target="_blank"] {
color: red;
}
</style>
</head>
<body>
<div>
<a href="https://www.codewithgagan.com" target="_blank">
Code With Gagan
</a>
<a href="https://www.codewithgagan.com">
Code With Gagan
</a>
<a href="https://www.codewithgagan.com" class="anch" target="_blank">
Code With Gagan
</a>
</div>
</body>
</html>
Substring Attribute Selector:
- This selector targets elements that have a specific attribute value containing a specified substring. It uses the notation `[attribute*=substring]`. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Select all input elements with the "class" attribute containing "error" */
input[class*="error"] {
background-color: red;
}
</style>
</head>
<body>
<div>
<input type="text" class="error">
<br> <br>
<input type="text" class="abcd error">
<br> <br>
<input type="text" class="abd error ioup">
<br> <br>
<input type="text" class="errorddd">
<br> <br>
<input type="text" class="jkhjerrorddd">
<br> <br>
<input type="text" class="iuyuioyn">
</div>
</body>
</html>
- In this example, all input elements with the `class` attribute containing the substring "error" will have a red background color.
Starts With Attribute Selector:
- This selector targets elements that have a specific attribute value starting with a specified string. It uses the notation `[attribute^=string]`. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Select all input elements with the "id" attribute starting with "user-" */
input[id^="user-"] {
background-color: red;
}
</style>
</head>
<body>
<div>
<input type="text" id="user-group">
<br> <br>
<input type="text" id="user-">
<br> <br>
<input type="text" id="user12">
<br> <br>
<input type="text" id="user">
<br> <br>
<input type="text" id="opuser">
<br> <br>
<input type="text" id="user-dd">
</div>
</body>
</html>
- In this example, all input elements with the `id` attribute starting with "user-" will have a red background color.
Ends With Attribute Selector:
- This selector targets elements that have a specific attribute value ending with a specified string. It uses the notation `[attribute$=string]`. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Select all input elements with the "id" attribute starting with "user-" */
input[id$="user"] {
background-color: red;
}
</style>
</head>
<body>
<div>
<input type="text" id="user">
<br> <br>
<input type="text" id="user-">
<br> <br>
<input type="text" id="user12">
<br> <br>
<input type="text" id="end-user">
<br> <br>
<input type="text" id="opuser">
<br> <br>
<input type="text" id="user-dd">
</div>
</body>
</html>
- In this example, all inputs elements with the `id` attribute ending with "user" will have a red background color.
- These are some of the commonly used attribute selectors in CSS. They allow you to target elements based on the presence, value, or substring in their attributes, providing flexibility in applying styles to specific elements on a web page.
No comments:
Post a Comment