CSS Pseudo Class and Element

Pseudo Classes:

A CSS pseudo-class selector matches components based on an additional condition and not necessarily defined by the document tree. It starts with a (:) colon

​

Syntax:

             selector:pseudo-class { property: value; }

Ex.

            <style type="text/css">

              a:link {

                    color: blue;

              }

              a:visited {

             text-decoration: none;

             }

            </style>

Pseudo Element:

The CSS pseudo-elements is a way to style elements of the document. Used double-colon (::) to define it.

​

Ex.1

        <style type="text/css">

            p::first-line {

                  color: red;

                  font-variant: small-caps;

               }

         </style>

​

Output:

the output of the paragraph looks like that:

Hi my name

Naveen Kumar

​

Ex 2.

​

       <style type="text/css">

               h1::before {

               content: url("/examples/images/marker-left.gif");

            }

                h1::after {

                content: url("/examples/images/marker-right.gif");

           }

         </style>