Introduction to Pseudo Class
The pseudo-class specifies the special state of an element. You’ve seen it used in anchor tags or a link, though they’re not limited to just those. At the end of lesson there will be a complete list of pseudo classes. The suspense, I know!
Here’s the Syntax of CSS Pseudo-class:
First, you have to define a selector. It could be <p>, <h1> or <a>. Then, you mention the pseudo-class, such as <:hover> or <:visited>. Last, the property will come e.g color etc.
Let’s give you a few examples of pseudo-classes. First, we’ll start with the anchor tag. Ahoy matey!
Anchor Pseudo Class
You learned in detail about the link states in the CSS lesson Links. However, what we didn’t tell you (cause we are sneaky) was about the Pseudo class. You saw how a link changes its state from unvisited to visited, to hover and then active? All of these states are actually the Pseudo classes. Here’s quick summary of link states and pseudo-classes!
- <:link> – A normal link state.
- <:visited> – Link has been visited.
- <:hover> – The moment when you bring your mouse over the link it changes its state, depending upon the CSS code.
- <:active> – The state when you click the link and it becomes active.
Here’s a demonstration of it:
This was a simple example of Pseudo-class.
[tooltip]’Please note: For effective use of a Pseudo-class on an anchor tag you should apply CSS in the same format i.e. :link, :visited, :hover and :active. Otherwise you could not get desired results [/tooltip]
Paragraph tag Pseudo-Class
In the above example, you saw the Pseudo-class with an anchor tag. Below you’ll see how:
Pseudo class will only affect this paragraph.
This is the second paragraph
This is the third paragraph
List of Pseudo-Class
Here is the complete List of Pseudo Classes. Worth the wait?
Here you leaned about Pseudo-classes. In the next lesson you’ll learn about Pseudo Elements