Bird
Raised Fist0
CSSmarkup~5 mins

Complex selector combinations in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
Complex selector combinations help you style specific parts of a webpage by combining simple selectors. This lets you target exactly what you want to change.
You want to style only buttons inside a navigation bar.
You need to change the color of all paragraphs inside a section but not outside.
You want to style list items that are direct children of a menu.
You want to style elements that have a certain class and are inside a specific container.
You want to style an element only if it is next to another specific element.
Syntax
CSS
selector1 selector2 { property: value; }
selector1 > selector2 { property: value; }
selector1 + selector2 { property: value; }
selector1 ~ selector2 { property: value; }
A space between selectors means 'descendant' - any level inside.
The '>' means direct child only.
The '+' means the next sibling element immediately after.
The '~' means any sibling elements after.
Examples
Styles all buttons inside any <nav> element, no matter how deep.
CSS
nav button { background-color: blue; }
Styles only list items that are direct children of a <ul>.
CSS
ul > li { list-style-type: square; }
Styles the paragraph that comes immediately after an <h2>.
CSS
h2 + p { margin-top: 0; }
Styles all .card elements that come after another .card sibling.
CSS
.card ~ .card { border-color: gray; }
Sample Program
This page shows different complex selector combinations in action. Buttons inside nav have a blue background. Only direct li children of ul have square bullets. Paragraph immediately after h2 is bold and red. Cards after the first card have gray borders.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Complex Selector Demo</title>
<style>
  nav button {
    background-color: lightblue;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    cursor: pointer;
  }
  ul > li {
    list-style-type: square;
    color: darkgreen;
  }
  h2 + p {
    font-weight: bold;
    color: darkred;
  }
  .card ~ .card {
    border: 2px solid gray;
    padding: 1rem;
    margin-top: 0.5rem;
  }
</style>
</head>
<body>
  <nav>
    <button>Home</button>
    <button>About</button>
  </nav>
  <section>
    <h2>Title</h2>
    <p>This paragraph is right after the title and is bold red.</p>
    <p>This paragraph is normal.</p>
  </section>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <div>
      <li>Not direct child, no square bullet</li>
    </div>
  </ul>
  <div class="card">Card 1</div>
  <div class="card">Card 2 with gray border</div>
  <div class="card">Card 3 with gray border</div>
</body>
</html>
OutputSuccess
Important Notes
Using complex selectors helps keep your CSS organized and precise.
Be careful: too many complex selectors can slow down the browser a bit.
Remember the difference between descendant (space) and child (>) selectors.
Summary
Complex selectors combine simple selectors to target elements precisely.
Use space for any descendant, > for direct child, + for next sibling, and ~ for any following siblings.
They help style parts of a page without adding extra classes or IDs.

Practice

(1/5)
1. Which CSS selector targets all <li> elements that are direct children of <ul> elements?
easy
A. ul > li
B. ul li
C. li > ul
D. ul + li

Solution

  1. Step 1: Understand the direct child selector

    The symbol > means direct child in CSS selectors.

  2. Step 2: Apply to the given elements

    ul > li selects only li elements that are immediate children of ul.

  3. Final Answer:

    ul > li -> Option A

  4. Quick Check:

    Direct child selector = > [OK]
Hint: Use > for direct child, space for any descendant [OK]
Common Mistakes:
  • Confusing space (descendant) with > (direct child)
  • Using + which selects only next sibling
  • Reversing element order in selector
2. Which of the following is the correct CSS selector syntax to select the <p> element immediately following an <h2> element?
easy
A. h2 ~ p
B. h2 > p
C. h2 p
D. h2 + p

Solution

  1. Step 1: Identify the adjacent sibling selector

    The + selector targets the element immediately after the first sibling.

  2. Step 2: Match the selector to the question

    h2 + p selects the p that comes right after an h2.

  3. Final Answer:

    h2 + p -> Option D

  4. Quick Check:

    Adjacent sibling selector = + [OK]
Hint: Use + for immediate next sibling element [OK]
Common Mistakes:
  • Using ~ which selects any following siblings, not just immediate
  • Using > which selects child elements, not siblings
  • Using space which selects any descendant
3. Given the HTML:
<div>
  <p class="intro">Hello</p>
  <span>World</span>
  <p>Again</p>
</div>

Which CSS selector will style only the second <p> element inside the <div>?
medium
A. div p ~ p
B. div p + span
C. div > p + p
D. div > p.intro

Solution

  1. Step 1: Understand the HTML structure

    Inside div, there are two p elements separated by a span.

  2. Step 2: Analyze each selector

    div > p + p selects a p immediately following another p as a direct child of div. Here, the second p is not immediately after the first p (there is a span in between), so this selector matches nothing.
    div p ~ p selects any p siblings after a p inside div. The second p is a sibling after the first p, so this matches the second p.

  3. Step 3: Choose the correct selector

    div p ~ p correctly selects the second p element.

  4. Final Answer:

    div p ~ p -> Option A

  5. Quick Check:

    General sibling selector = ~ [OK]
Hint: Use ~ to select siblings after a specific element [OK]
Common Mistakes:
  • Confusing + (adjacent sibling) with ~ (general sibling)
  • Using > which requires direct child relationship
  • Selecting by class when not needed
4. Consider this CSS selector:
section > article + p
What is wrong with this selector if the goal is to style all <p> elements that are direct children of section?
medium
A. The + combinator is invalid between article and p.
B. It selects all p elements inside section, not just direct children.
C. It only selects p elements immediately after an article, not all p children.
D. The selector should use a space instead of >.

Solution

  1. Step 1: Understand the selector components

    section > article + p means: select any p element that is immediately after an article which is a direct child of section.

  2. Step 2: Compare with the goal

    The goal is to select all p elements that are direct children of section. This selector only selects p elements that come immediately after an article child, missing other p children.

  3. Final Answer:

    It only selects p elements immediately after an article, not all p children. -> Option C

  4. Quick Check:

    Adjacent sibling + limits selection [OK]
Hint: Remember + selects only immediate next sibling [OK]
Common Mistakes:
  • Thinking + selects all siblings
  • Confusing > (child) with space (descendant)
  • Assuming invalid syntax with + combinator
5. You want to style all <li> elements that are inside a <ul> with class menu, but only if the <li> is not the first child. Which CSS selector achieves this?
hard
A. ul.menu li + li
B. ul.menu > li:not(:first-child)
C. ul.menu > li:first-child
D. ul.menu > li ~ li

Solution

  1. Step 1: Understand the requirement

    We want li elements inside ul.menu but exclude the first child li.

  2. Step 2: Analyze each selector

    ul.menu > li:not(:first-child) selects all direct li children of ul.menu except the first one.
    ul.menu li + li selects every li immediately following another li, which also works but only for adjacent siblings.
    ul.menu > li ~ li selects all li siblings after the first li as direct children, which also works.
    However, the most precise and clear selector that excludes only the first child is ul.menu > li:not(:first-child).

  3. Final Answer:

    ul.menu > li:not(:first-child) -> Option B

  4. Quick Check:

    :not(:first-child) excludes first child [OK]
Hint: Use :not(:first-child) to exclude first child elements [OK]
Common Mistakes:
  • Using :first-child instead of :not(:first-child)
  • Confusing + and ~ selectors for all siblings
  • Missing direct child combinator >