1.

Explain CSS  pseudo-classes with examples.

Answer»

Pseudo-classes in CSS are USED to DEFINE special states of HTML elements. They can be used along with the existing CSS selectors in order to add STYLES to elements based on their current state. The general syntax of using a pseudo-class with a regular selector is

selector:pseudo-class {           // styles here }

The pseudo-classes are divided into different types such as:

  1. Links: These classes are used to track the state of elements that contain a link. :active and :visited are two of the COMMONLY used link-based pseudo-classes. The :active pseudo-class selects elements containing the link that is currently active. The :visited pseudo-class targets elements that have links already visited by the user.  
  2. Dynamic: These classes can be applied to any elements to track their state that is defined by the cursor actions. For example, when a user hovers over an element, it can be tracked using the :hover pseudo-class. Similarly, the :focus pseudo-class can track the element that is currently focused on by the user.  
  3. Structural: These classes allow SELECTING elements according to their exact numerical position with respect to their parent element. Commonly used structural pseudo-classes are :only-child, :only-of-type, :first-child, :last-child, :first-of-type, :last-of-type, :nth-child, etc.


Discussion

No Comment Found