Quick links
Latest articles
Internship
Members
New...
Algorithms
Discrete Mathematics
Big data
Languages
C
C++
C++ STL
Java
Data Structure
C#.Net
Android
Kotlin
SQL
Web
PHP
Python
JavaScript
CSS
Ajax
Node.js
Web prog.
Programs
C
C++
DS
Java
C#
Python
Aptitude
C
C++
Java
DBMS
Interview
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

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>





Quick links:
C FAQ(s) C Advance programs C/C++ Tips & Tricks Puzzles JavaScript CSS Python Linux Commands PHP Android Articles More...

Featured post:
Introduction to Linux (Its modes, Safety, Most popular Applications)
Linux Best Distribution Software (Distros) of 2018

Was this page helpful? Please share with your friends...

Are you a blogger? Join our Blogging forum.

Comments and Discussions



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 (2015-2018), Some rights reserved.