CSS Attribute Selectors are a type of CSS selector that allows you to target elements based on the presence or value of their attributes. They are very useful when you need to target specific elements based on their attributes.
Here are some examples of CSS Attribute Selectors:
[attribute]– selects all elements that have the specified attribute
a[target="_blank"] {
color: red;
}In this example, all a elements that have a target attribute with the value of _blank will have red text color.
[attribute=value]– selects all elements that have the specified attribute with a specific value
input[type="text"] {
border: 1px solid black;
}In this example, all input elements that have a type attribute with the value of text will have a black border.
[attribute^=value]– selects all elements that have the specified attribute with a value that begins with the specified value
a[href^="https"] {
color: green;
}In this example, all a elements that have an href attribute with a value that begins with https will have green text color.
[attribute$=value]– selects all elements that have the specified attribute with a value that ends with the specified value
a[href$=".pdf"] {
font-weight: bold;
}In this example, all a elements that have an href attribute with a value that ends with .pdf will have bold font weight.
[attribute*=value]– selects all elements that have the specified attribute with a value that contains the specified value
input[name*=user] {
background-color: yellow;
}In this example, all input elements that have a name attribute with a value that contains user will have a yellow background color.
These are just a few examples of how you can use CSS Attribute Selectors. They are very powerful and can help you target specific elements on your page based on their attributes.