Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS The Selectors Solution

Trang Le
Trang Le
1,026 Points
Posted by 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,693 Points
Maxwell Newberry
Maxwell Newberry
7,693 Points

Can you provide some code for reference?

Trang Le
Trang Le
1,026 Points
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,693 Points
Maxwell Newberry
Maxwell Newberry
7,693 Points

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

2 Answers

Trang Le
Trang Le
1,026 Points
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
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