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

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

ait(26) • 2.2k views
ADD COMMENTlink
modified 17 months ago  • written 19 months ago by gravatar for yamini_patil_28 yamini_patil_28690
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

ADD COMMENTlink
modified 17 months ago  • written 17 months ago by gravatar for yamini_patil_28 yamini_patil_28690
Please log in to add an answer.