CSS Combinators Practice Questions with Solutions

Introduction

CSS combinators define the relationship between HTML elements. They help you target elements based on their parent, child, sibling, or adjacent sibling relationships. Learning combinators allows you to write cleaner CSS and reduce unnecessary class names. In this chapter, you’ll practice CSS combinators through simple solved questions that are easy for beginners to understand. CSS Combinators practice questions with solutions help to understand the concepts.

Question 1: Select All Paragraphs Inside a <div>

Problem Statement

Write CSS to select all <p> elements that are inside a <div>.

CSS Code

divp {    color: blue;}

Output

All <p> elements inside the <div> display blue text.

Explanation

• The descendant combinator is written using a space ( ).
• It selects all matching child, grandchild, and deeper descendant elements.
• It is useful when you want to style every matching element inside a parent.

Question 2: Select Only Direct Child Paragraphs

Problem Statement

Write CSS to select only the direct child <p> elements of a <div>.

CSS Code

div>p {    color: green;}

Output

Only the direct child paragraphs of the <div> display green text.

Explanation

• The > symbol is called the child combinator.
• It selects only immediate children.
• Nested paragraphs inside other elements are not selected.

Question 3: Select the First Paragraph After a <div>

Problem Statement

Write CSS to select the first <p> element that comes immediately after a <div>.

CSS Code

div + p {    color: red;}

Output

Only the first paragraph immediately following the <div> displays red text.

Explanation

• The + symbol is called the adjacent sibling combinator.
• It selects only the next sibling element.
• Other paragraphs are not affected.

Question 4: Select All Paragraphs After a <div>

Problem Statement

Write CSS to select all <p> sibling elements that come after a <div>.

CSS Code

div ~ p {    color: purple;}

Output

Every paragraph that is a sibling after the <div> displays purple text.

Explanation

• The ~ symbol is called the general sibling combinator.
• It selects every matching sibling after the specified element.
• The siblings must share the same parent.

Question 5: Style All Links Inside a Navigation Bar

Problem Statement

Write CSS to style all hyperlinks inside a <nav> element.

CSS Code

nava {    text-decoration: none;}

Output

All links inside the navigation bar appear without underlines.

Explanation

• nav a uses the descendant combinator.
• Every <a> element inside <nav> is selected.
• This is commonly used when styling navigation menus.

Question 6: Style Direct Child Images

Problem Statement

Write CSS to select only the direct child <img> elements inside a <section>.

CSS Code

section>img {    border: 2pxsolidblack;}

Output

Only the images that are direct children of the <section> receive a 2px black border.

Explanation

• The > symbol is the child combinator.
• It selects only immediate child elements.
• Images inside nested elements are not selected.

Question 7: Select the Next Heading After a Paragraph

Problem Statement

Write CSS to select the first <h2> element that comes immediately after a <p> element.

CSS Code

p + h2 {    color: blue;}

Output

The first <h2> immediately following a <p> displays blue text.

Explanation

• The + symbol is the adjacent sibling combinator.
• It selects only the next sibling element.
• Other <h2> elements are not affected.

Question 8: Style All Buttons Inside a Form

Problem Statement

Write CSS to style every <button> inside a <form>.

CSS Code

formbutton {    background-color: green;    color: white;}

Output

All buttons inside the form have a green background and white text.

Explanation

• form button uses the descendant combinator.
• Every button inside the form is selected.
• This includes buttons inside nested elements.

Question 9: Select All Sibling <div> Elements

Problem Statement

Write CSS to select all <div> elements that come after another <div> and share the same parent.

CSS Code

div ~ div {    background-color: lightgray;}

Output

Every <div> that follows another <div> with the same parent gets a light gray background.

Explanation

• The ~ symbol is the general sibling combinator.
• It selects all matching sibling elements after the first <div>.
• The elements must have the same parent.

Question 10: Style Direct Child List Items

Problem Statement

Write CSS to style only the direct child <li> elements of a <ul>.

CSS Code

ul>li {    color: darkblue;}

Output

Only the direct list items inside the <ul> display dark blue text.

Explanation

• ul > li uses the child combinator.
• Only immediate <li> children are selected.
• Nested list items inside another <ul> are not affected.

Key Takeaways

• CSS combinators define relationships between HTML elements.
• The descendant combinator ( ) selects all matching elements inside a parent.
• The child combinator (>) selects only direct children.
• The adjacent sibling combinator (+) selects the next matching sibling.
• The general sibling combinator (~) selects all matching siblings that follow.
• Combinators help write cleaner and more efficient CSS.
• Using combinators reduces the need for extra classes and IDs.

Frequently Asked Questions (FAQs)

1. What are CSS combinators?

CSS combinators are selectors that define the relationship between HTML elements, allowing you to target elements based on their position in the document.

2. What is the descendant combinator?

The descendant combinator is written as a space ( ). It selects all matching elements inside a parent element, including children, grandchildren, and deeper descendants.

3. What is the child combinator?

The child combinator is written as >. It selects only the immediate child elements of a parent.

4. What is the adjacent sibling combinator?

The adjacent sibling combinator is written as +. It selects only the first matching sibling that comes immediately after another element.

5. What is the general sibling combinator?

The general sibling combinator is written as ~. It selects all matching sibling elements that appear after another element and share the same parent.

6. Why should I use CSS combinators?

CSS combinators help you write shorter, cleaner, and more maintainable CSS by targeting elements based on their relationships instead of adding unnecessary classes.

7. Which combinator is used most often?

The descendant combinator ( ) is the most commonly used because it allows you to style all matching elements inside a parent container.

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

Rishabh Kumar