Avoiding deep nesting in CSS - Mini Project: Build & Apply

Avoiding Deep Nesting in CSS

📖 Scenario: You are creating a simple webpage with a navigation menu and some content sections. You want to style the page using CSS but avoid writing deeply nested selectors to keep your CSS clean and easy to maintain.

🎯 Goal: Build a CSS stylesheet that styles the navigation menu and content sections using flat selectors without deep nesting. The navigation links should be blue and underlined on hover. The content sections should have a light gray background and some padding.

📋 What You'll Learn

Create CSS rules for the navigation menu using flat selectors.

Style navigation links to be blue and underlined on hover.

Style content sections with a light gray background and padding.

Avoid using deeply nested selectors in CSS.

💡 Why This Matters

🌍 Real World

Web developers often need to write CSS that is easy to read and maintain. Avoiding deep nesting helps prevent complicated styles that are hard to debug.

💼 Career

Knowing how to write clean, flat CSS selectors is important for front-end developers to create scalable and maintainable websites.

1

Create the HTML structure

Write the HTML skeleton with a <nav> element containing an unordered list with three links: Home, About, and Contact. Also add two <section> elements with classes content-1 and content-2.

CSS

 and two  elements -->

Need a hint?

Use semantic HTML elements like <nav> and <section>. Add classes exactly as content-1 and content-2.

2

Add basic CSS selectors

Create a CSS file or style block. Add a selector for nav ul that removes the default list style and sets padding and margin to zero.

CSS

/* Add CSS for nav ul here */

Need a hint?

Use the selector nav ul and set list-style to none. Also set padding and margin to zero.

3

Style navigation links and content sections

Add CSS rules for nav a to make links blue and remove underline. Add a :hover style for nav a to underline the links on hover. Then add CSS rules for .content-1 and .content-2 to have a light gray background #f0f0f0 and padding of 1rem.

CSS

    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    /* Add styles for nav a and hover, and for .content-1 and .content-2 */

Need a hint?

Use separate selectors for nav a and nav a:hover. Group .content-1 and .content-2 with a comma.

4

Avoid deep nesting by using flat selectors

Ensure your CSS uses only flat selectors like nav a and .content-1, .content-2 without nesting inside other selectors. Add a comment at the top of your CSS: /* Flat selectors only, no deep nesting */.

CSS

/* Add a comment about flat selectors here */

Need a hint?

Make sure you do not nest selectors inside others. Add the comment exactly as shown at the top of your CSS.