CSS Selectors Practice Questions with Solutions

By /

Introduction

CSS selectors are used to target HTML elements and apply styles to them. They help you control which elements should receive specific CSS rules. In this chapter, you’ll practice the most commonly used CSS selectors through solved questions. These beginner-friendly examples will help you understand how different selectors work in real web development projects. CSS Selectors practice questions with solutions help to understand the concepts.

Question 1: Style All <h1> Headings Using an Element Selector

Problem Statement

Write CSS to change the text color of all <h1> headings to blue using an element selector.

CSS Code

h1 {
    color: blue;
}

Output

All <h1> headings appear in blue.

Explanation

  • h1 is an element selector.
  • It selects every <h1> element on the webpage.
  • The color property changes the heading text color to blue.

Question 2: Style All Paragraphs Using an Element Selector

Problem Statement

Write CSS to increase the font size of all <p> elements to 18 pixels.

CSS Code

p {
    font-size: 18px;
}

Output

All paragraphs display with an 18px font size.

Explanation

  • p selects all paragraph elements.
  • font-size changes the size of the text.
  • The style is applied to every paragraph on the page.

Question 3: Style an Element Using a Class Selector

Problem Statement

Write CSS to change the text color of elements with the class highlight to red.

CSS Code

.highlight {
    color: red;
}

Output

Every element with the class highlight displays red text.

Explanation

  • A class selector starts with a dot (.).
  • .highlight selects all elements that use the highlight class.
  • One class can be used on multiple HTML elements.

Question 4: Style an Element Using an ID Selector

Problem Statement

Write CSS to change the background color of an element with the ID header to light blue.

CSS Code

#header {
    background-color: lightblue;
}

Output

The element with the ID header displays a light blue background.

Explanation

  • An ID selector starts with a hash (#).
  • #header selects only the element with the ID header.
  • An ID should be unique on a webpage.

Question 5: Style All Elements Using the Universal Selector

Problem Statement

Write CSS to remove the default margin from every HTML element.

CSS Code

* {
    margin: 0;
}

Output

The default margin is removed from all HTML elements.

Explanation

  • * is called the universal selector.
  • It selects every element on the webpage.
  • It is commonly used to reset default browser spacing.

Question 6: Style Multiple Elements Using a Group Selector

Problem Statement

Write CSS to change the text color of both <h1> and <h2> headings to green.

CSS Code

h1,
h2 {
    color: green;
}

Output

Both <h1> and <h2> headings appear in green.

Explanation

  • A group selector allows you to style multiple elements using one CSS rule.
  • Selectors are separated with commas.
  • It helps reduce duplicate CSS code.

Question 7: Style Paragraphs Inside a Div Using a Descendant Selector

Problem Statement

Write CSS to change the text color of all paragraphs inside a <div> element to blue.

CSS Code

div p {
    color: blue;
}

Output

Only the paragraphs inside the <div> appear in blue.

Explanation

  • div p is called a descendant selector.
  • It selects all <p> elements that are inside a <div>.
  • Paragraphs outside the <div> are not affected.

Question 8: Style Direct Child Paragraphs Using a Child Selector

Problem Statement

Write CSS to make only the direct child paragraphs of a <div> bold.

CSS Code

div > p {
    font-weight: bold;
}

Output

Only the direct child <p> elements inside the <div> appear bold.

Explanation

  • > is called the child selector.
  • It selects only direct child elements.
  • Nested paragraphs inside other elements are not selected.

Question 9: Style the First Paragraph After a Heading

Problem Statement

Write CSS to change the text color of the first <p> element immediately after an <h1> to red.

CSS Code

h1 + p {
    color: red;
}

Output

The first paragraph immediately after the <h1> appears in red.

Explanation

  • + is called the adjacent sibling selector.
  • It selects only the first matching sibling immediately after another element.
  • Other paragraphs remain unchanged.

Question 10: Style All Paragraphs After a Heading

Problem Statement

Write CSS to change the text color of all <p> elements that come after an <h1> to purple.

CSS Code

h1 ~ p {
    color: purple;
}

Output

All matching paragraphs after the <h1> appear in purple.

Explanation

  • ~ is called the general sibling selector.
  • It selects all matching sibling elements that appear after the specified element.
  • Unlike the adjacent sibling selector, it can target multiple elements.

Key Takeaways

  • CSS selectors determine which HTML elements receive styles.
  • Element selectors target HTML tags like h1 and p.
  • Class selectors begin with a dot (.).
  • ID selectors begin with a hash (#).
  • The universal selector (*) selects every HTML element.
  • Group selectors apply the same styles to multiple elements.
  • Descendant, child, adjacent sibling, and general sibling selectors help target elements more precisely.

Frequently Asked Questions (FAQs)

1. What is a CSS selector?

A CSS selector is used to select HTML elements that you want to style. It tells the browser where a CSS rule should be applied.

2. What is the difference between an element selector and a class selector?

An element selector styles all elements of the same type, such as p or h1. A class selector styles only the elements that have a specific class name.

3. When should I use an ID selector?

Use an ID selector when you want to style one unique element on a webpage. An ID should only be used once per page.

4. What does the universal selector (*) do?

The universal selector selects every HTML element on the webpage. It is commonly used to reset default browser styles.

5. What is a group selector in CSS?

A group selector lets you apply the same CSS rule to multiple selectors by separating them with commas.

6. What is the difference between a descendant selector and a child selector?

A descendant selector targets all matching elements inside another element, while a child selector targets only the direct children.

7. Why are CSS selectors important?

CSS selectors help you apply styles efficiently, avoid repetitive code, and make your stylesheets easier to read and maintain.

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

Related Posts

Scroll to Top