CSS Lesson 15: Pseudo Class

0
23

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!

Pseudo-classes are interesting and easy to learn. Pseudo-classes are the perfect choice in order to add effects to links directly, otherwise we need help from Javascript along with CSS. Suppose you want to add a hover effect on a link- you can simply put <:hover> along with <a> tag.

Syntax
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.

Example

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:

Source Code Output

 

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:

Source Code Output

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?

Next Lesson

Here you leaned about Pseudo-classes. In the next lesson you’ll learn about Pseudo Elements

Leave a Reply