22 CSS Selectors – Attribute Selectors

CSS Selectors – Attribute Selectors

22 CSS Selectors – Attribute Selectors

 

Join the FULL HTML and CSS Tutorial Here >>

 

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="http://bizanosa.com" title="home">Home</a></li>
  <li><a href="http://bizanosa.com/abc" title="coupon">Coupons</a></li>
  <li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="myhomeground">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons " >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="hi">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons homepage " >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="hi to home skillshare ">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="homepage " >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="home skillshare">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons homepage " >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="Page Home for skillshare ">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="home">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="Page Home for skillsharehome">Skillshare</a></li>
<li><a href="http://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="http://bizanosa.com" title="Thisisthehomepage">Home</a></li>
<li><a href="http://bizanosa.com" title="This is the homepage">Home2</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li>
<li><a href="http://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:

 

Join the FULL HTML and CSS Tutorial Here >>

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here