Working with Pseudo Classes in CSS

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>

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>

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>

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

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

Listing 4: Script - matches the first <n> element in all 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>

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

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

Listing 5: Script of Matching all <n> elements in all first child 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>

Figure 5: above figure is output of the script which explains how to match all “<n>” elements in all first child “” 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.

Give your note to this post:	1 2 3 4 5 6 7 8 9 10
Is this post helpful?	Yes No