CSS Pseudo-Classes
§ In this tutorial we are trying to understand CSS
pseudo class selector and also we will learn how we can use them in our HTML
pages.
§ I am going to discuss pseudo class selector with
respect to navigation that is with respect to hyperlinks.
§ CSS pseudo-classes are used to add special effects
to some selectors
A simple syntax of pseudo-classes is as follows –
selector: pseudo-class
{
property: value
}
The :link pseudo-class
§ Use this class to add special style to an unvisited link
Selector: link
{
Declaration list;
}
§ It selects any html element targeted by the
selector, if its status is un-visited (or default)
a:link
{
text-decoration : none;
}
§ It selects any anchor element, if its status is
un-visited.
Let’s create an example here
<html>
<head>
</head>
<body>
<a href="contactus.html">Visit Contact US Page</a>
<br/>
<br/>
<a href="aboutus.html">Visit About US Page</a>
</body>
</html>
§ For example here you can see that as I told anchor
elements if they are in unvisited state they are going to have by default blue
color text and text decoration underline what if you want to remove this
underline then we have to identify the anchor elements which are in unvisited
state and apply the text decoration none.
<html>
<head>
<style>
a:link{
text-decoration: none;
}
</style>
</head>
<body>
<a href="contactus.html">Visit Contact US Page</a>
<br/>
<br/>
<a href="aboutus.html">Visit About US Page</a>
</body>
</html>
§ Save the file and go to browser and refresh you can
see that both of them are in unvisited state its reason text-decoration is set
to none they don't have underline.
The :hover pseudo-class
§ Use this class to add special style to an element when you mouse
over it.
selector : hover
{
declaration list;
}
§ It selects any html element targeted by the
selector, if its status is hovered (on mouse over)
a:hover
{
border: 5px solid red;
}
§ It selects any anchor element, if its status is
hovered.
§ I am telling to the browser that when we move the
mouse cursor over any anchor element state changes to the hover then apply
the border : 5px solid red;
§ when we move the mouse cursor over any anchor
element then state changes to the hover state.
<html>
<head>
<style>
a:link{
text-decoration: none;
}
a:hover{
border : 5px solid red;
}
</style>
</head>
<body>
<a href="contactus.html">Visit Contact US Page</a>
<br/>
<br/>
<a href="aboutus.html">Visit About US Page</a>
</body>
</html>
§ save the file and go to browser and refresh you can
see now both links are in unvisited state when I move the mouse cursor you can
see that now the first anchor state is changed to hover state so it has a
border: 5px solid red; if I move the mouse cursor on the second hyperlink then
you can see the second hyperlink is also has border: 5px solid red; when we go
away you can see that the underlined is remove they are back to unvisited state.
Now both are of them are in unvisited
state and hover state.
§ hover pseudo class selector is very very useful pseudo class
that you can use it on almost every HTML element that means on mouseover if you
want to apply some styles on any HTML element you can use this pseudo class
selectors.
§ Use this class to add special style to a visited link.
selector : visited
{
declaration list;
}
§ It selects any html element targeted by the
selector, if its status is visited (on click and page visit) § It selects any anchor element, if its status is
visited
<html>
<head>
<style>
a:link{
text-decoration: none;
}
a:hover{
border : 5px solid red;
}
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="contactus.html">Visit Contact US Page</a>
<br/>
<br/>
<a href="aboutus.html">Visit About US Page</a>
</body>
</html>
§ when I click on this Visit Contact US Page of course
we know that we go to the contactus.html page let’s go contact us page open if
I come back you can see that the first hyperlink text color is changed to
Purple color by default visited hyperlinks are going to have a purple color
what if you want the green color instead of purple color if you have visited
hyperlink and their color should be green.
§ then we have to write this code file a:visited{color: green;}save file and
go to browser and refresh you can see that the first hyperlink color is changed
to green color that indicate that we have visited the contact us page we have
not visited to about us page hence it is still having the blue color because it
is in unvisited state if I click on it we are visited to about us page and once
I come back it is also going to have the green color now both of them are in
visited state.
Navigation pseudo
classes | :target
Using
the :target pseudo-class in selectors
§ The pseudo-class:
target is used to style the target element of a URL containing a fragment
identifier.
selector : target
{
declaration list;
}
§ It selects any html element targeted by the
selector, if its status is targeted (Only when element id or name appears as
targeted fragment identifier in the page URI.).
§ Let me explain what is the targeted fragment
identifier go to the browser.in the URL
here you can see it is showing /default.html#bottom § We have #bottom
right what is the meaning of that #bottom
is actually known as targeted fragment identifier.
§ When we click on the middle section then #middle
you can see as middle that is actually known as fragment identifier.
§ When we click on the top section then #top
you can see as top that is actually known as fragment identifier.
§ If you see the targeted fragment identifier with the
name top then maybe we want to apply some border around the top section here
around this paragraph if I click on the middle section I want something to be
highlighted that the middle section is now a targeted fragment identifier if I
click on bottom section I want the border around it so that I can tell to the
user that how the bottom section is the targeted fragment identifier how do we
do that.
Example:-
<html>
<head>
<style>
p:target{
border: 2px solid greenyellow;
}
</style>
</head>
<body>
<p id="top">Top Section</p>
<a href="#middle">Middle Section</a><br/><br/>
<a href="#bottom">Bottom Section</a><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<p id="middle">Middle Section</p>
<a href="#top">Top Section</a><br/><br/>
<a href="#bottom">Bottom Section</a><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<p id="bottom">Bottm Section</p>
<a href="#top">Top Section</a><br/><br/>
<a href="#middle">Middle Section</a><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
Author Name
Author Description!
Get Free Email Updates to your Inbox!
Post a Comment