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

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

ait(26) • 2.4k  views
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 −

 <html>
<style type="text/css">
</style>
<body>
</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>
<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<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