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 Pseudo Classes in CSS

In this article I will cover the features and examples of CSS - Pseudo classes. Using the Pseudo classes add interactive and good user experience in the page.

Introduction:

In this tutorial you will learn about pseudo classes defined in CSS, including various properties and its implementation.

Description:

  • A pseudo-class is similar to any other class in HTML, but this is not specified explicitly in the markup. Some pseudo-classes are dynamic applied as a result of user interaction with the document. Pseudo classes are detected by CSS supporting browser itself.
  • Pseudo classes are used to add special effects to certain selectors, selectors are patterns used to select the elements style. Hence, pseudo classes are added to define style rules for selectors.
  • In HTML, JavaScript links is the only way to add the pseudo effect but with the addition of CSS, JavaScript links are not required.

Working with Pseudo Classes :

  • A pseudo-class is initiated with a colon sign (:) followed by a type selector or universal selector. The whitespace should not appear after the colon. There are various classes defined in CSS to add styles to selectors.
  • CSS’s first version introduced the :link, :visited, and :active pseudo-classes, applicable only for the HTML element. These pseudo-classes included three states of link, i.e., unvisited, visited, or currently being selected in a web page document. In CSS first version all three pseudo-classes were mutually exclusive.
  • The group of dynamic pseudo-classes were introduced in the later version of CSS. In addition to the :active pseudo-class there were also :hover and :focus in the group of dynamic pseudo-classes.
  • The :hover pseudo-class matches elements that are being designated by a pointing device.
  • :active matches any element that’s being activated by the user; and :focus matches any element that is currently in focus (that is, accepting input). CSS3 is looking forward for a greater range of powerful pseudo-classes
  • Using CSS you can make a different look for each one of these states. Syntax will be like this
  • Following listed example will clear the concept of anchor classes. These classes are collectively defined in an integrated way to call anchor class

Listing 1: Script of anchor classes.

<html>
<head>
<title>introduction to pseudo classes</title>
<style type="text/css">
a:link 
{color: green;
color:#b50010;
text-decoration: none;}

a:visited {
color: blue; 
background:#804180;
text-decoration: none;} 

a:hover{
color: gray;                     
background : #ffff00;
text-decoration: none;
}
a:active {color: black;}
</style>
</head>
<body>
<a href="http://www.facebook.com" target="_blank">Homepage of facebook</a>
<br />
<a href="http://www.orkut.com" target="_blank">Homepage of orkut</a>
<br />
<a href="http://www.gmail.com" target="_blank">Login page of gmail</a>
<br />
<a href="http://www.rediffmail.com" target="_blank">Rediffmail page</a>
</body>
</html>
described classes in initial version of CSS

Figure 1: Above figure is output of described classes in initial version of CSS which explained how the state's name in the "pseudo class," that defines how the HTML element should appear, depending on the state it is in.

CSS Lang pseudo Classes:

It is very useful for designers who work with multi-language sites. With this pseudo-class you can write CSS selectors that match based on what language the element is written. One can use it to change the font of the pages or make other changes depending upon the language on the page. It should be kept in mind that in Internet explorer :lang pseudo class supports only if <!Doctype> is mentioned. Following example will cover the concept of lang pseudo classes.

Listing 2: Script of Lang pseudo classes

<html>
<head>
<style type="text/css">
/* This is two stage of different language*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<" ">" "<" ">"; }
</style>
<p>...<q lang="fr">Americas cover 8.3% of the Earth's total surface area</q>...</p>
</body>
</html>
output of :lang pseudo class script for two different languages

Figure 2:Above figure shows output of :lang pseudo class script for two different languages.

First Child Pseudo class:

The :first-child pseudo-class matches a specified element that is the first child of another element and like lang pseudo class Internet explorer will support only if <!Doctype> is mentioned in script. Following script compiles idea of first child class.

Listing 3: Script of First child class

<html>
<head>
<style type="text/css">
p:first-child
{background : #804180;} 
</style>
</head>
<body>
<p>My definition of hard work is that which challenges you</p>
<p>My definition of hard work is that which challenges you</p>
</body>
</html>
 output of first child pseudo class

Figure 3: above figure is output of first child pseudo class tutorial in which the selector matches any “<p>” element that is the first child of any element:

Second example describes how the selector matches the first “<n>” element in all “<p>” elements. Same condition hold for Internet explorer like other classes.

Listing 4: Script - matches the first <n> element in all <p> elements.


<html>
<head>
<style type="text/css">
p >n:first-child
{background : #b50010;} 
</style>
</head>
<body>
<p>The big secret 
<n>in life is</n>
that there is 
</n> no big secret</p>
<p>The big secret 
<n>in life is
</n>that there is 
</n> no big secret</p>
</body>
</html>
output of script of which explained how to match the first <n> element in all <p>  elements

Figure 4: Above figure is output of script of which explained how to match the first “<n>” element in all “<p>” elements.

Similar to third, example description is how to match all <n> elements in all first child <p> elements

Listing 5: Script of Matching all <n> elements in all first child <p> elements

<html>
<head>
<style type="text/css">
p:first-child n
{
background:green;
} 
</style>
</head>
<body>
<p> The World  <n>Health Organization</n> (WHO) is a <n>specialized agency of</n> the United Nations </p>
<p> The World  <n>Health Organization</n> (WHO) is a <n>specialized agency of</n> the United Nations </p>

</body>
</html>
how to match all <n> elements in all first child <p> elements
Figure 5: above figure is output of the script which explains how to match all “<n>” elements in all first child “<p>” elements “

Conclusion:

This tutorial covered almost all fundamental topics related to Pseudo classes but there are various kind of selector terminology , Pseudo classes, which describes many more classes and adding different styles to hyperlinks as well.

You can explore the other functionalities of Pseudo classes and comment here in case of any questions.



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