Last updated on October 31st, 2020 at 07:51 am.
22 CSS Selectors – Attribute Selectors
In the last post we looked at Simple Direct CSS selectors. In this post you will learn how to use the html attributes as CSS selectors.
Attributes describe more characteristics of an HTML tag. In the last post you came across the id and class attributes. Apart from all the many attributes available for different elements in HTML, you can also create and use custom attributes. To create a custom attribute you use :
data-* .
For example you could create a custom attribute such as data-profession or data-currency etc . You can create attributes and use them.
The attribute selectors will match elements according to the attributes and the attribute values.
The syntax
The attribute name is put within [] .
[attribute] {/*CSS Style/}
Example :
[title]{ background-color: black;}
The HTML in question could be as the one below :
<a href=”#” title=”thanks mate go buy”> buy </a>
The variations of this selector include:
1 [attribute] : Selects all tags with the given attribute. Eg [title]
2 [attribute=value] : Selects all tags with the given attribute and the given value e.g. [title=”thanks”] . matches any element with title=”thanks”
3 [attribute~=value] : Selects all tags with the given attribute and the given value or if the given value is a space separated value for that attribute. Eg [title~=”thanks”] will match html elements with these attributes: title=”thanks” or title=”thanks mate” or title=”many thanks” . It won’t match title=”thanks-alot” or title=”thankss”
4 [attribute|=valuename] : Selects all elements with the given attribute where the value of the attribute is valuename or starts with the valuename- . It has to be a whole word Eg [title|=”thanks”] will match : title=”thanks” or title=”thanks-to-you”
5 [attribute^=valuename] : Selects all elements with the given attribute where the value of the attribute starts with the valuename . Eg [title^=”thanks”] will match : title=”thanks” or title=”thanks-to-you” or title=”thanksmate”
6 [attribute$=valuename] : Selects all elements with the given attribute where the value of the attribute ends with valuename . Eg [title$=”dollars”] will match : title=”ten-dollars” or title=”30 dollars” or title=” 30dollars”
7 [attribute*=valuename] : Selects all elements with the given attribute where the value of the attribute contains valuename . valuename doesn’t have to be a full word. Eg [title*=”dollars”] will match : title=”ten-dollars-only” or title=”30 dollars only” or title=” 30dollarsonly”
Example Illustrations
Below we have the code we used in the last post.
<!DOCTYPE html> <html> <head> <title> Learning about Selectors - BIZANOSA.COM</title> <style> #mainNav { list-style-type: none; margin: 20px; padding: 20px; background-color: #222; } li{display: block;} a{color: white; font-size: 20px} [title*="home"] { font-weight: 600; } </style> </head> <body> <ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="coupon">Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="myhomeground">Skillshare</a></li> </ul> </body> </html>
Throughout these examples, we are going to use the section with the <ul> to demonstrate each of these attribute selectors. You can copy it into an html file and run it. B following along with me, you will understand each of these selectors really well.
Example 1: 1 [attribute]
The HTML :
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="myhomeground">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" >Quotes</a></li> </ul>
If you want to make the element with the title attribute to be bold with larger font , do it as follows:
The CSS:
[title] { font-weight: bold; font-size:1.5rem; }
THE RESULT:
Home and Skillshare will be bold and bigger if you check in the browser.
Example 2: 2 [attribute=value]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="Coupons " >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="hi">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="hi" >Quotes</a></li> </ul>
If you want to make the title attribute with the value of hi to be bold and larger font, do it as follows
THE CSS:
[title="hi"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Quotes and Skillshare will be bold and bigger if you check in your browser.
Example 3: 3 [attribute~=value]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="Coupons homepage " >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="hi to home skillshare ">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="hi to quotes-home" >Quotes</a></li> </ul>
If you want to make elements with title attributes that have the word home somewhere in their value, bold and bigger, do it as follows. Remember the word home must be separated by a space from other words.
THE CSS:
[title~="home"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Home and Skillshare will be bold and bigger if you check in the browser.
Example 4: 4 [attribute|=valuename]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="homepage " >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="home skillshare">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="home-to-quotes" >Quotes</a></li> </ul>
If you want elements with the title attribute, where the value of the attribute starts with home to be bold, you will do it as follows. Note that it has to be a full word, hence only Home and Quotes will be bold.
THE CSS:
[title|="home"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Home and Quotes will be bold and bigger.
Example 5: 5 [attribute^=valuename]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="Coupons homepage " >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="Page Home for skillshare ">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="homepage for quotes" >Quotes</a></li> </ul>
To make the text bold , where value begins with the word home , do it as follows.
THE CSS:
[title^="home"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Home and Quotes will be bold and bigger.
Example 6: 6 [attribute$=valuename]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="home">Home</a></li> <li><a href="https://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="Page Home for skillsharehome">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="homepage for quotes" >Quotes</a></li> </ul>
To match where value ends with the word home , do it as follows.
THE CSS:
[title$="home"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Home, Couons and Skillshare will be bold and bigger.
Example 7: 7 [attribute*=valuename]
THE HTML:
<ul id="mainNav"> <li><a href="https://bizanosa.com" title="Thisisthehomepage">Home</a></li> <li><a href="https://bizanosa.com" title="This is the homepage">Home2</a></li> <li><a href="https://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li> <li><a href="https://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li> <li><a href="https://bizanosa.com/qt" title="homepage for quotes" >Quotes</a></li> </ul>
To select where value has the word home within it, do it as follows.
THE CSS:
[title*="home"]{ font-weight: bold; font-size:1.5rem; }
THE RESULT:
Everything will be bold and bigger , except for Skillshare .
Important NOTE
Adding a space after or before a value is will have effects and may affect how some of these selectors affect those elements.
For example : this selector, [attribute$=valuename] will select an element with this: title=”Coupons page not-home” , but it will not select an element with a space at the end like this one : title=”Coupons page not-home ” .
That’s it for this post, we’ll continue in the next post.
To learn HTML and CSS click the button below: