Complex selector combinations in CSS - Mini Project: Build & Apply

Styling a Blog Layout with Complex CSS Selectors

📖 Scenario: You are designing a simple blog page. The page has a header, a main content area with multiple articles, and a footer. Each article has a title, a paragraph, and a list of tags. You want to style these elements using complex CSS selectors to target specific parts of the page.

🎯 Goal: Build CSS rules using complex selector combinations to style the blog page elements. You will create styles that apply to nested elements, sibling elements, and elements with specific attributes or states.

📋 What You'll Learn

Use descendant selectors to style nested elements

Use child selectors to style direct children

Use adjacent sibling selectors to style elements immediately following another

Use attribute selectors to style elements with specific attributes

Use pseudo-classes like :first-child and :last-child

💡 Why This Matters

🌍 Real World

Web developers often need to style complex page layouts by targeting specific elements precisely. Using complex CSS selectors helps apply styles efficiently without adding extra classes or IDs.

💼 Career

Understanding complex CSS selectors is essential for front-end developers to create maintainable, scalable, and accessible web designs.

1

Create the HTML structure for the blog page

Write the HTML skeleton for the blog page. Create a <header> with a <h1> titled "My Blog". Then create a <main> section containing two <article> elements. Each article should have a <h2> title, a <p> paragraph, and a <ul> list with three <li> tags. Finally, add a <footer> with a <p> that says "© 2024 My Blog".

CSS

  My Blog


  
    First Article
    This is the first article paragraph.
    
      tag1
      tag2
      tag3
    
  
  
    Second Article
    This is the second article paragraph.
    
      tagA
      tagB
      tagC
    
  


  © 2024 My Blog

Hint

Start by typing the HTML tags exactly as described. Use semantic tags like <header>, <main>, <article>, and <footer>.

2

Add a CSS variable and base styles

Create a CSS variable called --main-color with the value #2a9d8f inside the :root selector. Then add a rule to set the font family of the body to Arial, sans-serif and the background color to #f0f0f0.

CSS

  My Blog


  
    First Article
    This is the first article paragraph.
    
      tag1
      tag2
      tag3
    
  
  
    Second Article
    This is the second article paragraph.
    
      tagA
      tagB
      tagC
    
  


  © 2024 My Blog


:root {
  /* Your code here */
}

body {
  /* Your code here */
}

Hint

Define the CSS variable inside :root and set the body styles below it.

3

Use complex selectors to style blog elements

Write CSS rules using complex selectors: style all <h2> inside article to have color var(--main-color). Use a child selector to make only direct <p> children of article have font size 1.1rem. Use an adjacent sibling selector to add a top margin of 1rem to any ul that immediately follows a p. Use an attribute selector to make all li elements with text content containing "tagB" have font weight bold. Finally, use the :first-child pseudo-class to make the first li in each ul have a text color of #e76f51.

CSS

  My Blog


  
    First Article
    This is the first article paragraph.
    
      tag1
      tag2
      tag3
    
  
  
    Second Article
    This is the second article paragraph.
    
      tagA
      tagB
      tagC
    
  


  © 2024 My Blog


:root {
  --main-color: #2a9d8f;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

/* Your code here */

Hint

Use article h2 for descendant selector, article > p for child selector, p + ul for adjacent sibling, li:has(:contains("tagB")) for attribute-like selector (note: CSS doesn't support :contains, so use attribute selector or alternative), and ul li:first-child for first-child pseudo-class.

4

Add final styles for header and footer using pseudo-classes

Add CSS to style the header so that its h1 has a bottom border of 3px solid var(--main-color) and padding bottom of 0.5rem. Then style the footer p to have text aligned center and font style italic. Use the :last-child pseudo-class to add a top margin of 2rem to the last article inside main.

CSS

  My Blog


  
    First Article
    This is the first article paragraph.
    
      tag1
      tag2
      tag3
    
  
  
    Second Article
    This is the second article paragraph.
    
      tagA
      tagB
      tagC
    
  


  © 2024 My Blog


:root {
  --main-color: #2a9d8f;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

article h2 {
  color: var(--main-color);
}

article > p {
  font-size: 1.1rem;
}

p + ul {
  margin-top: 1rem;
}

li:has(:contains("tagB")) {
  font-weight: bold;
}

ul li:first-child {
  color: #e76f51;
}

/* Your code here */

Hint

Use header h1 for the header title styles, footer p for footer paragraph styles, and main article:last-child to target the last article inside main.

Practice

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 >