Hello guys! good evening to you all. Without wasting much time let me introduce you guys to the topic for this tutorial section, i will be talking about pseudo-classes. I know you must be wondering what i mean by that, just relax and read through the tutorial so you can understand.
CSS pseudo-classes are used to add special effects to some selectors. Javascript or any other script is not needed in order to use those effects. Below is the syntax of pseudo-classes:
selector:pseudo-class {property: value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}
Below are the following most commonly used with pseudo-class:
Value
|
Description
|
:link
|
Use this class to add special style to
an unvisited link.
|
:visited
|
Use this class to add special style to
a visited link.
|
:hover
|
Use this class to add special style to
an element when you mouse over it.
|
:active
|
Use this class to add special style to
an active element.
|
:focus
|
Use this class to add special style to
an element while the element has focus.
|
:first-child
|
Use this class to add special style to
an element that is first child of some other element.
|
:lang
|
Use this class to specify a language
to use in a specified element.
|
You can also read our tutorial post on: Css Visibility
While defining pseudo-classes in a <style>....</style> block, the following points should be noted:
- a:hover must come after a:link and a:visited in the css definition in order to be effective.
- a:active must come after a:hover in the css definition in order to be effective.
- Pseudo-class names are not case sensitive.
- Pseudo-class are different from css classes but they can be combined.
The :link Pseudo-class
Following below is the example which shows how to use :link class to set link color. Possible value could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:link {color: #000000}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
<head>
<style type="text/css">
a:link {color: #000000}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
The :visited Pseudo-class
Following below is the example which shows how to use :visited class to set the color of visited link. Possible value could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
In the above example once the link is clicked, it will change its color to green.
You can also read our tutorial post on: Html Tags
The :hover Pseudo-class
Following below is the example which shows how to use :hover class to change the color of links when you bring your mouse cursor over that link. Possible value could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="/html/index.html">Bring Mouse Here</a>
</body>
</html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="/html/index.html">Bring Mouse Here</a>
</body>
</html>
In the above example you will discover that once you bring your mouse over the link, it will change the color of the link to yellow.
The :active Pseudo-class
Following below is the example which shows how to use :active class to change the color of active links. Possible value could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
In the above example it will change its color to pink when the user clicks and holds the mouse left button.
You can also read our tutorial post on: Css Positioning
The :focus Pseudo-class
Following below is the example which shows how to use :focus class to change the color of focused links. Possible value could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="/html/index.html">Click Link</a>
</body>
</html>
In the above example it will change its color to orange when the link gets focused, you will also notice that the color will change back to its original color when it loses focus.
The :first-child Pseudo-class
The :first-childpseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.
To make first-child work in IE <!DOCTYPE> must be declared at the top of the HTML document.
For example, to indent the first paragraph of all <div> elements, you could use this definition:
<html>
<head>
<style type="text/css">
div > p:first-child {
text-indent: 20px;
}
</style>
</head>
<body> <div>
<p> This is the first paragraph in div. This paragraph will be indented </p>
<p> This is the second paragraph in div. This paragraph will not be indented </p>
</div>
<p>But it will not match the paragraph in this HTML below:</p>
<div>
<h3>Heading</h3>
<p> The first paragraph inside the div This paragraph will not be affected </p>
</div>
</body>
</html>
<head>
<style type="text/css">
div > p:first-child {
text-indent: 20px;
}
</style>
</head>
<body> <div>
<p> This is the first paragraph in div. This paragraph will be indented </p>
<p> This is the second paragraph in div. This paragraph will not be indented </p>
</div>
<p>But it will not match the paragraph in this HTML below:</p>
<div>
<h3>Heading</h3>
<p> The first paragraph inside the div This paragraph will not be affected </p>
</div>
</body>
</html>
You can also read our tutorial post on: Css Text
The :lang Pseudo-class
The language pseudo-class :lang allows constructing selectors based on the language setting for specific tags.
This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').
In a document that needs to address this difference, you can use :lang pseudo-class to change the quote marks appropriately. The following code below changes the <blockquote> tag appropriately for the language being used:
<html>
<head>
<style type="text/css">
/* Two levels of quotes for two languages */
:lang(en) {quotes: ' " ' ' " ' " ' " " ' ";}
:lang(fr) {quotes: "<<" ">>" "<" ">";}
</style>
</head>
<body>
<p>.....<q lang="fr">A quote in a paragraph</q>......</p>
</body>
</html>
<head>
<style type="text/css">
/* Two levels of quotes for two languages */
:lang(en) {quotes: ' " ' ' " ' " ' " " ' ";}
:lang(fr) {quotes: "<<" ">>" "<" ">";}
</style>
</head>
<body>
<p>.....<q lang="fr">A quote in a paragraph</q>......</p>
</body>
</html>
From the above example, the lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.
Alright guys this is end of this tutorial on Css Pseudo-classes. Feel free to ask your questions where you don't understand, am always here to attend to your questions.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available. Thanks for reading and bye for now.