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

Gavin Broekema
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Broekema
Full Stack JavaScript Techdegree Student 16,214 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,939 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 16,214 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,939 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

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 16,214 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.