CSS Interview Questions

Pseudo-classes in CSS are special keywords added to selectors that specify a special state of the selected elements. They allow you to apply styles to elements based on their state or position in the document tree, without needing to modify the HTML or add additional classes.

Commonly Used Pseudo-Classes and Examples

1. :hover

   • Description: Targets an element when the user hovers over it with a mouse pointer.
   • Example:

     a:hover {
         color: red;
         text-decoration: underline;
     }

     • This example changes the color of a link to red and underlines it when the user hovers over it.

2. :active

   • Description: Targets an element when it is being activated (e.g., when a button is being clicked).
   • Example:

     button:active {
         background-color: green;
         color: white;
     }

     • This example changes the background color of a button to green and the text color to white while the button is being clicked.

3. :focus

   • Description: Targets an element when it has focus (e.g., when a user clicks on a text input field).
   • Example:

     input:focus {
         border-color: blue;
         outline: none;
     }

     • This example changes the border color of an input field to blue when it is focused, and removes the default outline.

4. :nth-child(n)

   • Description: Targets the nth child of a parent element. You can use formulas or keywords like odd or even.
   • Example:

     li:nth-child(odd) {
         background-color: lightgray;
     }

     • This example applies a light gray background to every odd-numbered li element within its parent.

5. :first-child

   • Description: Targets the first child element of a parent.
   • Example:

     p:first-child {
         font-weight: bold;
     }

     • This example makes the first p element within its parent bold.

6. :last-child

   • Description: Targets the last child element of a parent.
   • Example:

     p:last-child {
         color: blue;
     }

     • This example changes the text color of the last p element within its parent to blue.

7. :nth-of-type(n)

   • Description: Targets the nth child of a particular type (e.g., div, p) within its parent, regardless of the element's type.
   • Example:

     p:nth-of-type(2) {
         font-size: 20px;
     }

     • This example sets the font size of the second p element within its parent to 20 pixels.

8. :not(selector)

   • Description: Targets elements that do not match the specified selector.
   • Example:

     p:not(.highlight) {
         color: gray;
     }

     • This example applies gray text color to all p elements that do not have the class highlight.

9. :checked

   • Description: Targets checked form elements like checkboxes or radio buttons.
   • Example:

     input[type="checkbox"]:checked {
         background-color: yellow;
     }

     • This example changes the background color of checked checkboxes to yellow.

10. :disabled

    • Description: Targets form elements that are disabled.
    • Example:

      input:disabled {
          background-color: lightgray;
          cursor: not-allowed;
      }

      • This example changes the background color of disabled input fields to light gray and changes the cursor to indicate that interaction is not allowed.

Using Pseudo-Classes in Combination

You can combine pseudo-classes to target elements in more specific states.

• Example: Styling a button when it is both hovered and focused:

  button:hover:focus {
      border-color: orange;
  }

  • This example changes the border color of a button to orange when it is both hovered over and focused.

Summary

Pseudo-classes are powerful tools in CSS that allow you to target elements based on their state or position without needing to alter the HTML structure. They are essential for creating interactive and dynamic user interfaces.