Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS The Selectors Solution

Trang Le
Trang Le
1,026 Points

I change the style of CSS, but nothing changes?

What happened? I'm sure CSS and HTML are linked together.

Maxwell Newberry
Maxwell Newberry
7,681 Points

Can you provide some code for reference?

Trang Le
Trang Le
1,026 Points

/* Change the color of all list items inside an unordered list */ ul li { color: green; }

Maxwell Newberry
Maxwell Newberry
7,681 Points

That looks right, can you edit your original post and share your HTML?

2 Answers

Trang Le
Trang Le
1,026 Points

I didn't change any. I checked. But it is already linked together.

Ezra Siton
Ezra Siton
12,644 Points

Specificity

The navbar link is a element inside a list item (Not list item inside ul). = more specific

This code changes the color of this bottom list (Scroll to bottom):

/* Change the color of all list items inside an unordered list */ 
ul li { color: red; }
<div class="list-primary">
    <h2>List of Important Stuff</h2>
    <ul>
        <!-- i am red -->
        <li>Nulla lacus risus, laoreet tempus</li>
        <li>Praesent sit amet auctor sapien sit amet</li>
        <li>Aenean sit amet quam leo etiam</li>
        <li>Duis eget nulla nec lobortis habitant</li>
    </ul>
</div>

I guess you look at the top navbar (The blue color comes from the page original styles):

/* Style from the code-sample */
a {
    color: #4683af;
}
/* Change the color of all list items inside an unordered list */ 
ul li { color: red; }

In this case a is more specific selector for this strcuture (So the color stay blue == override the red color):

<ul><li><a href="#">Articles</a></li></ul>

Video Related:

SUMMARY:

<ul>
  <li><a href="#">I am Blue #4683af</a></li>
  <li>I am Red</li>
</ul>

Next time: Inspect element

Related course: https://teamtreehouse.com/library/introduction-to-chrome-devtools