Home » CSS

Pseudo Classes | CSS

Pseudo Classes | CSS: In this article, we are going to learn what Pseudo class is, what is its syntax and how to use it?
Submitted by Akash Kumar, on November 07, 2018

These classes are basically used to add special effects to some selectors or in other words, we can say that A pseudo-class is basically used to define a special state of an element.

Through pseudo-classes, we don't require javascript or any other script for these effects.

The basic syntax of pseudo-classes as follows:

    selector:pseudo-class {property: value}

We can also write it in another way such as follows:

    selector.class:pseudo-class {property: value}

The most commonly used pseudo-classes are:

  1. :link
  2. :visited
  3. :hover
  4. :active
  5. :focus
  6. :first-child

When we are defining pseudo classes in between opening and closing style tag following points should be noted.

  1. The name of pseudo classes are not case sensitive.
  2. These are basically different from CSS classes but then can be combined.
  3. In order to make CSS definition more effective following points should be keep in mind.
    1. a:hover MUST come after a:link and a:visited
    2. a:active MUST come after a:hover

Basic Uses of Pseudo-Classes are as follows

  1. It can be used to style an element when moves move over it.
  2. It can style they visited and unvisited links differently.
  3. We can style an element when it gets focus.

Let’s discuss commonly used pseudo classes one by one:

1. :link

This is basically used to add special style to an unvisited link. The following example shows how to use the :link class to set the color of link.

<html>

<head>
    <style type="text/css">
        a:visited {
            color: #FF00FF
        }
    </style>
</head>

<body><a href="">INCLUDEHELP!!!</a>
</body>

</html>

2. :visited

This is basically used to add style to the previously visited link. The following example shows how to use the :visited class to set the color of previously visited link.

<html>

<head>
    <style type="text/css">
        a:visited {
            color: #FF00FF
        }
    </style>
</head>

<body><a href="">INCLUDEHELP</a>
</body>

</html>

3. :hover

This is basically used to add special style to the element when we move mouse over it. The following example shows how to use the :hover class to change the color of links when mouse moves over it.

<html>

<head>
    <style type="text/css">
        a:hover {
            color: #0000FF
        }
    </style>
</head>

<body><a href="">Move Mouse here</a>
</body>

</html>

4. :active

This class is basically used to add special style to the element that are active. The following example shows how to use the :active class to change the color of all active links.

<html>

<head>
    <style type="text/css">
        a:active {
            color: #FF00FF
        }
    </style>
</head>

<body><a href="">INCLUDEHELP</a>
</body>

</html>

5. :focus

This class is basically used to add the special style to the element that are focused. The following example shows how to use the :focus class to change the color of the link when it is focused.

<html>

<head>
    <style type="text/css">
        a:focus {
            color: #FF00FF
        }
    </style>
</head>

<body><a href="">INCLUDEHELP</a>
</body>

</html>

6. :first-child

This class is basically used to add special style to the element that is the first child of another element.

<html>

<head>
    <style type="text/css">
        div >p:first-child {
            text-indent: 25px;
            color: #FF00FF;
        }
    </style>
</head>

<body>
    <div>
        <p>Here INCLUDEHELP is intendent</p>
        <p>Here INCLUDEHELP is not indented</p>
    </div>
    <p>But this will not change the paragraph in HTML document:
    </p>
    <div>
        <p>Here INCLUDEHELP will not be effected.
        </p>
    </div>
</body>





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.