Attribute selectors are used to style items using the attribute of elements rather than targeting tag elements in HTML. This gives you another way or opportunity to style the similar tags with different attributes.
ALSO SEE: Targeting tags within document hierarchy
1. Targeting Attribute
This will simply target the attribute of the tag. So now, the elements under this attribute will be styled accordingly.
<!-- this is HTML -->
<img src="keepcalm.png" width="500" height="300" />
<img src="keepcalm.png" width="500" height="300" title="Keep Calm" />
/* this is CSS */
img[title] {
border: 3px solid red;
}
Form the above code, you can see that the image with title attribute is styled accordingly to the CSS but the same image without title attribute doesn't.
2. Targeting Exact Value
We now know how to style an element according to its attribute, but we can also style an element according to its attribute values. Let us see how to target exact attribute values,
<!-- this is HTML -->
<p><a href="http://codecrypton.blogspot.in">CodeCrypton - Home</a></p>
<p><a href="http://codecrypton.blogspot.in/p/html.html">CodeCrypton - HTML</a></p>
<p><a href="http://codecrypton.blogspot.in/p/css.html">CodeCrypton - CSS</a></p>
/* this is CSS */
a[href="http://codecrypton.blogspot.in/p/html.html"] {
background-color: #000;
color: #fff;
text-decoration: none;
}
You can also style the webpage according to the attribute values as explained above. The specified value must be exactly equal as in attribute.
3. Targeting value within spaces
As we know to target exact attribute values, let us learn how to target attribute value words within spaces here,
<!-- this is HTML -->
<p title="This blog name is CodeCrypton">Code Crypton is a programming blog that focuses on
building webpages.</p>
/* this is CSS */
[title~="blog"] {
background-color: orange;
color: #069;
width: 400px;
padding: 10px;
}
By using the tilde ( ~ ) symbol, now you can target value words that are within spaces.
4. Targeting values within dashes
Now, just like styling attribute values within spaces, now we can style attribute values that are within dashes. Lets learn about that here,
<!-- this is HTML -->
<p title="this-blog-name-is-codecrypton">Code Crypton is a programming blog that fouces on
building webpages.</p>
/* this is CSS */
p[title|="blog"] {
background-color: yellow;
color: #069;
width: 400px;
padding: 10px;
}
Now by using the vertical bar ( | ) symbol, we can style the attribute value within dashes.
5. Attribute beginning with certain value
If you remember attribute value starting with certain words, then you can use the caret (^) symbol. See how it works below,
<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>
/* this is CSS */
h1[rel^="Code"] {
color: #069;
}
6. Attribute ending with certain value
Just like previous example, if you remember attribute value ending with certain words, then you can use the dollar ($) symbol. Look below how it works,
<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>
/* this is CSS */
h1[rel$="Blog"] {
color: green;
}
7. Targeting certain values somewhere
If you only remember some phrases of value name but don't know the exact position of these phrases inside the value, then follow the code below,
<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>
/* this is CSS */
h1[rel*="programming"] {
background-color: #333;
color: rgb(210,233,255);
width: 215px;
padding: 10px;
}
When you use the star/multiply (*) symbol, then you can target certain attribute values somewhere inside like the above code.
8. Using multiple attributes
So far, we have only seen styling elements with one attribute. But if needed, you can use even two or more attributes to style an element for better styling.
<!-- this is HTML -->
<h1 rel="multiple" title="attribute selector">Multiple attribute selector</h1>
/* this is CSS */
h1[rel*="multiple"][title$="attribute selector"] {
color: #069;
background-color: #fff;
border: 1px solid orange;
border-radius: 9px;
width: 400px;
padding: 10px;
}
From the above code, you can see how a single element's attributes are used multiple times to style an element.
Related posts:
