CSS Basics Web development basics

CSS pseudo class

CSS pseudo class is used to define a special state of an element.

CSS pseudo class can be used for:

  • Style an element when a user mouses over it.
  • Style visited and unvisited links differently.
  • Style an element when it gets focus

Syntax for applying pseudo class:

CSS classes can also be used with pseudo-classes −

Some pseudo classes commonly used are:

Value Description
:link adds special style to an unvisited link.
:visited this class adds special style to a visited link.
:hover class adds special style to an element when you mouse over it.
:active Use this class to add special style to an active element.
:focus Adds special style to an element while the element has focus.
:first-child To add special style to an element that is the first child of some other element.
:lang Class to specify a language to use in a specified element.

Applying CSS pseudo class to Anchor <a>

Links can be displayed in different ways:
Example:

Pseudo class and CSS classes

Pseudo-classes can be combined with CSS classes.When you hover over the link in the example, it will change color:
Example:

Applying :hover at <div>

Example:

I am a divison. I have :hover class applied on me.
Hover me to see what it does!!!

CSS pseudo class – :first-line and :first-child

The :first-child pseudo-class matches a specified element that is the first child of another element. The :first-line pseudo class will select the first line of any element and apply the style code on that.
Example:

I am a strong person. I am a strong person.

I am a strong person. I am a strong person.

HI, css is known as cascading style sheets.
CSS brings magic to html.

:before and :after pseudo classes

The :before selector inserts something before the content of each selected element(s).
Use the content property to specify the content to insert.
Use the :after selector to insert something after the content.
Example for using :before

My name is Scanfcode

I am new to this world

I am a coding blog.I can teach you all about CSS

Example for using :after

My name is Scanfcode

I am a coding blog.I can teach you all about CSS

CSS pseudo class

:focus pseudo class

The :focus selector is used to select the element that has focus.
Example for using :focus

Search: