Sign up for my newsletter to receive weekly updates
Join our facebook page
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
The syntax of pseudo-classes:
Links can be displayed in different ways:
/* unvisited link */
/* visited link */
/* mouse over link */
/* selected link */
Note: 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-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
When you hover over the link in the example, it will change color:
Hover on div
An example of using the :hover pseudo-class on a div element:
Simple Tooltip Hover
Hover over a div element to show a p element (like a tooltip):
CSS – The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Match the first p element
In the following example, the selector matches any p element that is the first child of any element:
Match the first i element in all p elements
In the following example, the selector matches the first i element in all p elements:
Match all i elements in all first child p elements
In the following example, the selector matches all i elements in p elements that are the first child of another element:
#LearnWebTechnologies #CSS #CSSTutorialForBeginners