Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Different Types of CSS Attribute Selectors

In this article I will cover the concept of CSS Attribute Selectors. I will discuss how to use the different types of selectors and write some examples to demonstrate the functionality.

Introduction:

In this tutorial you will learn about CSS attribute selector which allows you to style any HTML element with specific attribute.

The CSS attribute selector directly applies to elements with specific attributes, i.e. CSS can identify the HTML elements (Image, Text, Links, Box etc) based on any one of their attributes. An attribute selector will match elements on the basis of three conditions:

  • The presence of an attribute
  • The exact match of an attribute value
  • Or the partial match of an attribute value

Attribute selectors can be defined in four ways. Section below will cover the working of each attribute selector with example.

Attribute selectors are declared or bounded by square brackets; an attribute selector consists of an attribute name surrounded by square brackets. This is very important to know that Internet explorer (version 7 and 8) support attribute selectors only if a ‘!DOCTYPE’ is specified in HTML script. And lower version of Internet explorer (less that 7) never supports attribute selector.

[attribute] :

[attribute] attribute selector matches if the element has the specific attribute. In the following example this property matches on every foundation tag. Script contains three different attribute selectors. Example will compile the idea of this concept:

Syntax:
 
[Title] {
Height: 200px ;}

Following source code will explain the exact meaning this definition.

Listing 1: Script of [Attribute] Attribute Selector (First Type)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[boy]{
color:red;
}
[man]{
color:green;
}
[doc]{
color:blue;
}
</style>
</head>
<body>
<h3> Atrribute Selector Example one: </h3>
<hr/>
<h1 boy=" First Block of Page">First Block of Page </h1>
<hr/>
<a man="Facebook" href="http://facebook.com">Facebook home page: Second Block </a>
<hr/>
<img boy= "imagesource" src="capture.jpg" alt="plane_image" width="400" height="100" />
<hr/>
<h3 doc=" Block after image source">Block after image source </h3>
<hr/>
<p>This is example of attribute selector</p>
</body>
</html>
example of first type of attribute selector. Described script holds three-attribute selector [boy] [man] [doc]. Based on presence of an attribute body section the output is shown

Figure 1: Above figure is example of first type of attribute selector. Described script holds three-attribute selector [boy] [man] [doc]. Based on presence of an attribute body section the output is shown.

[attribute=value] When Attribute Exactly Equals Certain Value:

[attribute=value] declare matches if the element has the attribute with a specific value. Listed script will explain working of this type of attribute selector. Script contains two attribute selectors, depending upon specific value body section of code will show the effect of this attribute selector.

Listing 2: [attribute=value] Script (Second Type)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[attribute1=man]
{color:blue;
border:5px solid green;
}
[attribute2=boy]
{color:red;
border:5px solid red;
}</style>
</head>
<body>
<h2> Example of Attribute Selector </h2>
<img attribute1="man" src="capture.jpg" width="270" height="50" />
<hr />
<a attribute2="boy" href="http://facebook.com"> Facebook Home Page</a>
<hr />
<h2> This Heading is Without any Attribute Selector</h2>
<p attribute1="man"> A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act. 
</body>
</html> 
output of second kind of attribute selector script in which attribute selector matches exact specified value and body section printing output according to match of attribute selector

Figure 2: Above figure is output of second kind of attribute selector script in which attribute selector matches exact specified value and body section printing output according to match of attribute selector.

[attribute~="value"]:

This attribute selector selects element(s) whose attribute name and one of the words out of a white space-separated list of words is matching, where list of the white space separated words is the value of the attribute. If "value" is either a white space or an empty string, it does not select anything. Listed script will elaborate the concept:

Listing 3: Script of Attribute Selector when it matches name and one of the words out of a white space-separated list of words

<! DOCTYPE html>
<html>
<head>
<style type="text/css"> 
[attribute1~=boy]{
color:blue;
border:4px solid green;
} 
[attribute2~=forest]{
color:green;
border:4px solid red;
}</style>
</head>
<body>
<h2>Example of attribute selector: </h2>
<h3 attribute1="boy jack ">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies,
 and became the ransom of the world. It was a perfect act</h3>
<p attribute1="Mr boy">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act</p>
<hr/>
<p attribute2="indian forest">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act</p>
</hr>
<img attribute2="forest lol" src="capture.jpg" width="270" height="50" />
<p title="gentle"> This line is without any attribute selector</p>
</body>
</html>
output of third kind of attribute selector in which HTML elements are getting styled with different attribute selector that contains a specified value match. This works even if the attribute has space separated values

Figure 3: above figure is output of third kind of attribute selector in which HTML elements are getting styled with different attribute selector that contains a specified value match. This works even if the attribute has space separated values:

[attribute|=value]:

[attribute|=value] matches if the element has an attribute with a hyphen separated item that matches the value. Following script will compile the idea:

Listing 4: Script of Attribute Selector which apply the all matching attribute selectors.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[attribute1|=man]{
color:red;
border:2px solid green;
}
[attribute2|=boy]{
color:blue;
border:2px solid green;
}
[attribute3|=girl]{
color:green;
border:2px solid green;
}
[attribute4|=female]{
color:pink;
border:2px solid green;
}
</style>
</head>
<body>
<h2>Example of attribute selector</h2>
<p attribute1="man">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies</p>
</hr>
<p attribute2="boy-fath">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies</p>
</hr>
<p attribute3="girl-girl">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies</p>
</hr>
<p attribute4="female-girl">A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies</p>
<hr />
<h2 attribute4="hmth-sensex"> This line is without any attribute selector property</h2>
</body>
</html>
. fourth type of attribute selector in which each foundation tag is getting affected if the condition is matching

Figure 4: above figure is example of fourth type of attribute selector in which each foundation tag is getting affected if the condition is matching.

Conclusion:

Tutorial presented above covered all the basic aspects of attribute selector. You can some more different types of attribute selector by using syntax in CSS 3 like ‘+’, ‘’. Hope it will be helpful for you. If you have any queries please comment at Mrbool site.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login