Explain What is a pseudo-class?

It is a CSS technique that sets the style when an element changes its state. E.g. style changes when mouse hover, different styles for visited or unvisited links, etc.

There are four different types of pseudo-classes:

  • Links: These pseudo-classes are used to style the link both in its normal state by default and when it has already been visited
  • Dynamic: Dynamic pseudo-classes can be applied to any element to define how they are shown when the cursor is located on them, or by clicking on them or when they are selected
  • Structural: Structural pseudo-classes allow to style elements based on an exact numerical position of the element
  • Others: Some elements can be styled differently based on the language or what type of label they are not.
Format Name Elements are styled if Compatibility
Link and Dynamic Pseudo-classes
: link Link the value of the href attribute is not in the history IE4, FF1, O3.5, S1, CSS1
: visited Link Visited the value of the href attribute is in the history IE4, FF1, O3.5, S1, CSS1
: target Target Link a targeted link FF1.3, O9.5, S1.3, CSS3
: active Active the element has been clicked IE7, FF1, O3.5, S1, CSS1
: hover On the cursor is over the element IE4 *, FF1, O3.5, S1, CSS2
: focus Focus the element captures the focus of the document IE7, FF1, O7, S1, CSS2
* Only available for the item before IE7
Structural and Other Pseudo-classes
: root Root is the main element of a document FF1.5, O9.5, S3.1, C3, CSS3
: empty Empty does not have child nodes FF1.5, O9.5, S3.1, C3, CSS3
: only-child Only son has no sibling nodes FF1.5, O9.5, S3.1, C3, CSS3
: only-of-type Type Only has a unique selector among its siblings FF1.5, O9.5, S3.1, C3, CSS3
: first-child First son is the first child node of another element FF1.5, O9.5, S3.1, C3, CSS3
: nth-of-type (n) Nth of Type is the nth element with that selector FF1.5, O9.5, S3.1, C3, CSS3
: last-child Last son is the last child node of an element FF1.5, O9.5, S3.1, C3, CSS3
: first-of-type First of the Kind is the first element of its selector type in the parent element FF1.5, O9.5, S3.1, C3, CSS3
: last-of-type Last of the Type is the last element of its selector type in the parent element FF1.5, O9.5, S3.1, C3, CSS3
: lang Language has a specifically defined language code IE8, FF1.5, O9.5, S3.1, C3, CSS2.1
: not Denial you are not using a specific selector FF1.5, O9.5, S3.1, C3, CSS3