CSS Pseudo Classes Practice Questions with Solutions

Introduction

CSS pseudo-classes allow you to style an element based on its state or user interaction without adding extra classes to your HTML. For example, you can change the appearance of a link when the user hovers over it, clicks it, or visits it. Pseudo-classes are widely used in buttons, forms, menus, and interactive web pages. In this chapter, you’ll practice CSS pseudo-classes through simple solved questions that are easy for beginners to understand. CSS Pseudo Classes practice questions with solutions help to understand the concepts.

Question 1: Change Link Color on Hover

Problem Statement

Write CSS to change the color of a hyperlink when the mouse pointer is placed over it.

CSS Code

a:hover {    color: red;}

Output

The hyperlink changes to red when the mouse pointer is placed over it.

Explanation

• :hover is activated when the user moves the mouse over an element.
• It is commonly used for links, buttons, and menu items.
• It improves user interaction and visual feedback.

Question 2: Change Button Color When Clicked

Problem Statement

Write CSS to change a button’s background color while it is being clicked.

CSS Code

button:active {    background-color: green;}

Output

The button’s background changes to green while the mouse button is pressed.

Explanation

• :active styles an element during the click action.
• The effect lasts only while the button is being pressed.
• It gives users visual feedback during interaction.

Question 3: Style a Visited Link

Problem Statement

Write CSS to change the color of a visited hyperlink.

CSS Code

a:visited {    color: purple;}

Output

Previously visited links appear in purple.

Explanation

• :visited styles links that the user has already opened.
• It helps users distinguish visited pages from unvisited ones.
• It only works with hyperlinks.

Question 4: Highlight an Input Field When Focused

Problem Statement

Write CSS to add a blue border when an input field receives focus.

CSS Code

input:focus {    border: 2pxsolidblue;}

Output

The input field displays a blue border when the user clicks inside it.

Explanation

• :focus is applied when an element becomes active for typing or interaction.
• It is commonly used on form fields.
• It improves accessibility and user experience.

Question 5: Style the First Child Element

Problem Statement

Write CSS to change the text color of the first <li> inside a list.

CSS Code

li:first-child {    color: blue;}

Output

Only the first list item displays blue text.

Explanation

• :first-child selects the first child element inside its parent.
• Other list items remain unchanged.
• It is useful for highlighting the first item in a list.

Question 6: Style the Last Child Element

Problem Statement

Write CSS to change the text color of the last <li> inside a list.

CSS Code

li:last-child {    color: green;}

Output

Only the last list item displays green text.

Explanation

• :last-child selects the last child element inside its parent.
• Only the final <li> is affected.
• It is useful for highlighting the last item in a list.

Question 7: Style Even Table Rows

Problem Statement

Write CSS to apply a background color to even-numbered table rows.

CSS Code

tr:nth-child(even) {    background-color: lightgray;}

Output

Every even-numbered table row displays a light gray background.

Explanation

• :nth-child(even) selects the 2nd, 4th, 6th, and other even rows.
• It improves table readability.
• This technique is commonly used for zebra-striped tables.

Question 8: Style Odd Table Rows

Problem Statement

Write CSS to apply a background color to odd-numbered table rows.

CSS Code

tr:nth-child(odd) {    background-color: lightyellow;}

Output

Every odd-numbered table row displays a light yellow background.

Explanation

• :nth-child(odd) selects the 1st, 3rd, 5th, and other odd rows.
• Alternating row colors improve readability.
• It is often combined with even-row styling.

Question 9: Style Disabled Form Fields

Problem Statement

Write CSS to change the background color of disabled input fields.

CSS Code

input:disabled {    background-color: lightgray;}

Output

Disabled input fields display a light gray background.

Explanation

• :disabled selects form controls that cannot be edited.
• It visually indicates that the field is inactive.
• This improves the user experience in forms.

Question 10: Style Checked Checkboxes

Problem Statement

Write CSS to apply a style when a checkbox is checked.

CSS Code

input:checked {    accent-color: green;}

Output

Checked checkboxes display a green checkmark (in supported browsers).

Explanation

• :checked selects checked checkboxes and radio buttons.
• accent-color changes the control’s highlight color.
• It is commonly used to match form controls with a website’s color theme.

Key Takeaways

• Pseudo-classes style elements based on their state or position.
• :hover styles elements when the mouse pointer is over them.
• :active styles elements while they are being clicked.
• :visited styles links that have already been visited.
• :focus highlights active form fields.
• :first-child and :last-child target the first and last child elements.
• :nth-child() selects elements based on their position.
• :disabled and :checked are commonly used for form controls.

Frequently Asked Questions (FAQs)

1. What are CSS pseudo-classes?

CSS pseudo-classes are keywords added to selectors to style elements based on their state, position, or user interaction.

2. What is the :hover pseudo-class?

:hover applies styles when the mouse pointer is placed over an element.

3. What does the :focus pseudo-class do?

:focus styles an element when it becomes active, such as when a user clicks inside an input field.

4. What is the difference between :first-child and :last-child?

• :first-child selects the first child element.
• :last-child selects the last child element.

5. How does :nth-child() work?

:nth-child() selects elements based on their position, such as even, odd, or a specific number.

6. Which pseudo-class is used for checked checkboxes?

The :checked pseudo-class selects checked checkboxes and radio buttons.

7. Where are CSS pseudo-classes commonly used?

They are commonly used for:

• Navigation menus
• Buttons
• Hyperlinks
• Forms
• Tables
• Interactive web pages

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar