CSS Attribute Selectors: Target Elements with Precision
CSS [Attribute] Selectors
CSS Attribute Selectors allow you to select HTML elements based on the presence or value of their attributes.
Here are a few examples of how you can use CSS Attribute Selectors:
The [attribute]
Selector
This selector targets elements that have the specified attribute, regardless of its value.
As an example:
Editor
The [attribute=value]
Selector
This selector targets elements that have the specified attribute with a specific value.
As an example:
Editor
In this example:
- The CSS selector
a[href="#top"]
targets all links with an href value of"#top"
. - In this case, it only matches the first link in the list.
- The text-decoration:none; property removes the underline from the link's text.
The [attribute^=value]
Selector
This selector targets elements that have the specified attribute with a value that starts with the specified value.
As an example:
Editor
In this example:
- The CSS selector
[class^="example"]
targets all elements that have a"class"
attribute starting with"example"
. - This includes the first three elements in the HTML code (the div, p, and span), but not the fourth one (the p with multiple classes).
- The
font-weight: bold
; property sets the font weight of the text inside those elements to bold.
The [attribute$=value]
Selector
This selector targets elements that have the specified attribute with a value that ends with the specified value.
As an example:
Editor
In this example:
- The CSS selector
[href$=".pdf"]
targets all elements with an"href"
attribute that ends with".pdf"
. - This includes the first two links in the HTML code.
- The
color: red
; property sets the color of the text inside those links to red.
The [attribute*=value]
Selector
This selector targets elements that have the specified attribute with a value that contains the specified value.
As an example:
Editor
In this example:
- The CSS selector
[src*="logo"]
targets all elements with a"src"
attribute that contains the word"logo"
. - This includes the first two images in the HTML code.
- The
width: 300px
; property sets the width of those images to300
pixels.
The selector also targets the iframe and audio elements, which have "src"
attributes that contain the word "logo"
.