Explain in detail pseudo classes and pseudo elements in css3 with example.

69views

written 6.7 years ago by

teamques10 ★ 68k

• modified 6.7 years ago

CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects.

Syntax

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes −
```
selector.class:pseudo-class {property: value}
```
The most commonly used pseudo-classes are as follows −

1. :link - Use this class to add special style to an unvisited link.

 <html>
 <head>
  <style type="text/css">
     a:link {color:#000000}
  </style>
  </head>
  <body>
  <a href="">Black Link</a>
  </body>
  </html>

2. :visited - Use this class to add special style to a visited link.

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

3. :hover - Use this class to add special style to an element when you mouse over it.

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

4. :active - Use this class to add special style to an active element.

5. :focus - Use this class to add special style to an element while the element has focus.

6. :first-child - Use this class to add special style to an element that is the first child of some other element.

7. :lang - Use this class to specify a language to use in a specified element.

   <html>
   <head>
  <style type="text/css">
     /* Two levels of quotes for two languages*/
     :lang(en) { quotes: '"' '"'  "'"  "'"; }
     :lang(fr) { quotes: "<<" ">>" "<" ">"; }
  </style>
  </head>
  <body>
  <p>...<q lang="fr">A quote in a paragraph</q>...</p>
  </body>
  </html>

While defining pseudo-classes in a <style>...</style> block, following points should be noted −
- a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
- a:active MUST come after a:hover in the CSS definition in order to be effective.
- Pseudo-class names are not case-sensitive.
- Pseudo-class are different from CSS classes but they can be combined.

Pseudo-Elements

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
property:value;
}

::after - Insert something after the content of each mentioned element

::before - Insert something before the content of each mentioned element

::first-letter - Selects the first letter of each mentioned element

::first-line - Selects the first line of each mentioned element

::selection - Selects the portion of an element that is selected by a user

ADD COMMENT EDIT