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 CSS Foundations Selectors Basic Structural Pseudo-Classes

Gavin Broekema
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points
Posted by Gavin Broekema
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points

:only-child not selecting <ul>

body {
    padding: 1% 25%;
    font-family: sans-serif;
}
ul {
    margin: 25px auto 0;
    padding: 12px;
    border: 2px dotted grey;
    list-style-position: inside;
    font-size: 1.5em;
}
li {
    margin: 0;
    padding: 15px;
    border-bottom: 2px solid #224a6b;
}

/* Structural Pseudo-classes */

li:last-child {
  background-color: steelblue;
  color: white;
  border: none;
}

/* NOTE: Instead of creating a separate class for the last list item in order to remove the border, it can be done with the last-child selector */

:only-child {
  background: lightcoral;
}

This is the code I had at around 4 minutes in; when my code stopped working like Guil's. When I saved and refreshed the page, the ul background color would simply flash lightcoral upon loading, but would not stay. As you can imagine, this made finding any of the smaller element changes a lot harder to notice througout the rest of the video... Why is this happening?

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Can you share your HTML code as well?

Gavin Broekema
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points
Gavin Broekema
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points 
<!DOCTYPE html>
<html>
<head>
    <title>Structural Pseudo-Classes</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ul>
        <li>First child of ul</li>
        <li>Second child</li>
        <li>Third child</li>
        <li>Fourth child</li>
        <li>Last child of ul</li>
    </ul>
</body>
</html>
David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Hmm, your code looks fine to me. Maybe you're having an issue with browser caching or something. Have you tried restarting your browser?

1 Answer

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Well I can't watch the video right now but my guess is because you put nothing before the : . Its not magic so it doesn't know what your looking for. My guess is you need this:

ul:only-child
Gavin Broekema
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points
Gavin Broekema
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 Points

That was my first assumption, but I found that 

:only-child

selects any element that is the only child of its parent. Since, ul is the only child of the body element, it should be selected. I'm thinking it is just an error with my IDE. Brackets has bugged up on me before.