• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Pseudo-classes

← Previous Next →

🔹 What Are CSS Pseudo-classes?

A CSS pseudo-class is used to define the special state of an element. You can style elements based on user interaction, element position, input status, and more — without adding any extra classes or IDs.

🔸 Commonly Used Pseudo-classes

Pseudo-class Description
:hover When user hovers over an element
:focus When an element (like input) is focused
:active When an element is being clicked
:first-child First child of a parent
:last-child Last child of a parent
:nth-child(n) Nth child of a parent
:checked A checked radio or checkbox input
:disabled A disabled input or button
:required A form field marked as required
:not(selector) Matches everything except the given selector

🔸 1. Example: :hover

a:hover {
  color: red;
}

Changes color when a link is hovered.

🔸 2. Example: :first-child

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

Styles only the first <p> inside its parent.

🔸 3. Example: :nth-child(odd) / :nth-child(even)

li:nth-child(even) {
  background-color: #f0f0f0;
}

Useful for zebra striping.

🔸 4. Example: :focus

input:focus {
  outline: 2px solid blue;
}

Styles an input field when it is focused.

🔸 5. Example: :checked

input[type="checkbox"]:checked + label {
  color: green;
}

Applies styles to checked checkbox's associated label.

🔸 6. Example: :not()

div:not(.active) {
  opacity: 0.5;
}

Selects all <div>s that don't have class active.

Practice Questions

Q1. Make hovered links change color to red.

Q2. Bold the first paragraph inside a container.

Q3. Apply background to even list items.

Q4. Highlight form input when focused.

Q5. Change color of checked checkboxes.

Q6. Style the last child of an <ul>.

Q7. Make required input fields show red border.

Q8. Hide buttons that are disabled.

Q9. Apply italic style to all paragraphs except ones with class .no-style.

Q10. Use :nth-child(3) to underline the 3rd list item.

CSS Pseudo-classes Quiz

Q1: Which pseudo-class targets hovered elements?

A. :hover
B. :focus
C. :clicked
D. :select

Q2: What does :first-child select?

A. The first child of a parent
B. The first element of the page
C. All first elements
D. None of the above

Q3: Which pseudo-class targets focused input fields?

A. :hover
B. :focus
C. :selected
D. :checked

Q4: Which one targets a selected radio button?

A. :checked
B. :focus
C. :disabled
D. :hover

Q5: What does :nth-child(2) select?

A. All elements in 2nd row
B. The second child of its parent
C. Last element
D. Odd elements

Q6: Which pseudo-class is used for disabled buttons?

A. :inactive
B. :disabled
C. :off
D. :not-working

Q7: What does :not(.selected) do?

A. Selects elements without class selected
B. Only elements with .selected
C. First child
D. Disables styling

Q8: How to style all required inputs in red?

A. input:focus
B. input:required
C. input:hover
D. input:filled

Q9: What is the result of li:last-child?

A. All list items
B. The last <li> inside its parent
C. The first <li>
D. None of the above

Q10: Which pseudo-class is not valid?

A. :hover
B. :first-child
C. :clicked
D. :checked
← Previous Next →
Login
Go Back Top