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

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

ait(26) • 2.4k  views
1  upvotes
2

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

2  upvotes
Please log in to add an answer.

Next up

Read More Questions

If you are looking for answer to specific questions, you can search them here. We'll find the best answer for you.

Search

Study Full Subject

If you are looking for good study material, you can checkout our subjects. Hundreds of important topics are covered in them.

Know More