A pseudo-class is a keyword which we can add to CSS selectors in order to distinct a special state of the belonging HTML element. For example, :hover can be opted to change a link’s color when the mouse hovers over it.
A pseudo-class can’t exist on its own. It must be close to a selector. The pseudo-class will only distinct a picky state of that selector. It has the following syntax-
selector:pseudo-class {property: value}
CSS classes can also be opted with pseudo-classes as given below-
selector.class:pseudo-class {property: value}
The most commonly opted pseudo-classes are given in the table below-
Value Description
:link Opt this class to add special style to an unvisited link.
:visited Opt this class to add special style to a visited link.
:hover Opt this class to add special style to an element when we move over it.
:active Opt this class to add special style to an active element.
:focus Opt this class to add special style to an element while the element has focus.
:first-child Opt this class to add special style to an element that is the first child of some other element.
:lang Opt this class to state a language to opt in a specified element.
While defining pseudo-classes in a <style>...</style> block, following points should be followed by us-
• 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 is different from CSS classes but they can be combined.
The :link pseudo class-
The following example demonstrates how to opt the :link class to set the link color. Possible values could be any color name in any valid format.
<HTML>
<head>
<style type="text/CSS">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Black Link</a>
</body>
</HTML>
It will produce the following black link-
The :visited pseudo class-
This pseudo-class targets links that have been visited by the user. By default the links are blue and turn purple when we’ve visited them.
<HTML>
<head>
<style type="text/CSS">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Click this link</a>
</body>
</HTML>
The output of this code will produce following link. Once we will click this link, it will change its color to green.
The :hover pseudo class-
This :hover pseudo class will apply CSS when the targeted element is hovered.
<HTML>
<head>
<style type="text/CSS">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Bring Moopt Here</a>
</body>
</HTML>
Now, if we bring mouse over the link then we will see that it changes its color to yellow as set in the code above.
The :active pseudo class-
This is opted to apply CSS to active elements. This is commonly opted with <a> and <button> elements.
<HTML>
<head>
<style type="text/CSS">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Click This Link</a>
</body>
</HTML>
When a user clicks on the link, the color changes to the pink.
The :focus pseudo class-
This pseudo-class apply CSS when an HTML element is in focus.
<HTML>
<head>
<style type="text/CSS">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Click this Link</a>
</body>
</HTML>
It will produce the following link. When this link gets focused, its color changes to orange. The color changes back when it loses focus.
The :first-child pseudo-class
The :first-child CSS pseudo-class represents the first element along with a set of sibling elements. The selected element must have a parent and to make: first-child work in IE <!DOCTYPE> must be declared at the top of the document.
For example, to indent the first paragraph of all <div> elements, we could opt this definition:
<HTML>
<head>
<style type="text/CSS">
div p:first-child
{
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</HTML>
It will produce the following result −
First paragraph in div. This paragraph will be indented
Second paragraph in div. This paragraph will not be indented
But it will not match the paragraph in this HTML:
Heading
The first paragraph inside the div. This paragraph will not be effected.
The :lang pseudo-class
The language pseudo-class :lang, permits constructing selectors based on the language setting for specific tags.
This class is optful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically opts angle brackets (< and >) for quoting purposes, while the English language opts quote marks (' and ').
In a document that needs to address this difference, we can opt the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being opted:
Syntax of lang pseudo class selector is-
selector : lang(ISO language code) { declaration list; }
It helps us to opt for any HTML element targeted by the selector, if it has the lang attribute value set to the specified language code. The example of optingit is given below-
p:lang(en){
border: 2px dotted blue;
}
It selects any p element, if its lang attribute value is set to en.ISO: International Organization for Standardization. This is depicted below-
<HTML>
<head>
<style type="text/CSS">
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>
</body>
</HTML>
The :lang selectors will apply to all the elements in the document. However, not all elements make opt of the quotes property, so the effect will be transparent for most elements. It will produce the following result:
...<<A quote in a paragraph>>...