0
0
CSSmarkup~30 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.
Progress0 / 4 steps
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
Need a 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
Need a 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
Need a 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
Need a 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.