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 Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

Michał Gonciarz
Michał Gonciarz
13,549 Points
Posted by Michał Gonciarz
Michał Gonciarz
13,549 Points

Only child doesn't work

Hi!

I've followed instruction from the video, but I can't get the same effect on only child rule - nothing changes. I've tried in many ways, but it just does not work. Would be greatful if someone point out the error for me.

Here's my CSS:

li:first-child {
  background: #52bab3;
  color: white;
}

li:last-child {
  border-bottom: none;
}

:only-child {
  color: #52bab3;
  font-size: 3em;
}

I've made some minor changes to styling in the HTML file, because the H1 element wasn't centered as I applied code from video instruction, so I'm pasting also HTML code. The only child rule didn't work before my changes anyway.

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
      width: 50%;
      margin: auto;
        }
    h1 {
      text-align: center;
    }
        ul {
            list-style: none;
        }
        li {
            border-bottom: 1px dotted #40918c;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
  <!-- <h1>My list of items</h1> -->
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>

10 Answers

Sulaiman Noh
Sulaiman Noh
14,538 Points
Sulaiman Noh
Sulaiman Noh
14,538 Points

I think it's because of chrome. i have tried this code on other browser and it works fine.

Michał Gonciarz
Michał Gonciarz
13,549 Points
Michał Gonciarz
Michał Gonciarz
13,549 Points

Thanks Sham, will check that out.

Mairum Leal Ferreira
Mairum Leal Ferreira
23,508 Points
Mairum Leal Ferreira
Mairum Leal Ferreira
23,508 Points

Looks like a Chrome problem, works on Safari and Firefox.

Sulaiman Noh
Sulaiman Noh
14,538 Points
Sulaiman Noh
Sulaiman Noh
14,538 Points

I have the same problem too. but the instructor not specify the element but still works?is it because of chrome or what?

Alexander Melo
Alexander Melo
4,297 Points
Alexander Melo
Alexander Melo
4,297 Points

Having the same problem. Anybody got the solution?

Keith Rauschl
Keith Rauschl
3,067 Points
Keith Rauschl
Keith Rauschl
3,067 Points

So much for Google following standards for CSS.

Keith Rauschl
Keith Rauschl
3,067 Points
Keith Rauschl
Keith Rauschl
3,067 Points

I am using Chrome and the only-child method did not work. However, the "span:only-child" worked for the mark up: <span>&check;</span> as shown in the video.

Andrea Bartholomew
Andrea Bartholomew
5,262 Points
Andrea Bartholomew
Andrea Bartholomew
5,262 Points

Same issue here. Using Chrome.

Paul Cox
Paul Cox
12,671 Points
Paul Cox
Paul Cox
12,671 Points

I just tried this as it seemed highly unlikely that Chrome doesn't support this. I had the same issue but after adding a tomato background I noticed that I was getting a "flash of content" of the tomato background on reload.

This lead me to believe that an extension was injecting some html into the body leading to the ul no longer being the only-child of the body. Removing the Window Resizer extension recommended in an earlier course fixed the problem and now the only-child selector worked correctly.

Zoltán Rajcsányi
Zoltán Rajcsányi
6,426 Points
Zoltán Rajcsányi
Zoltán Rajcsányi
6,426 Points

I tested and the Google Chrome doesn't support the only-child pseudo element only on the body tag at this time.

But you can nested the code example under a div and it's superb... :)

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
        }
        h1 {
      text-align: center;
    }
        ul {
            list-style: none;
            width: 50%;
            margin: auto;
        }
        li {
            border-bottom: 1px dotted #40918c;
            padding: 15px 10px;
        }
    </style>
</head>
<body>  
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3 <span>&check;</span></li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7 <span>&check;</span></li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>        
        </ul>    
    <div>
</body>
</html>
Roy Joaquin
Roy Joaquin
8,309 Points
Roy Joaquin
Roy Joaquin
8,309 Points

My only child doesn't work either but then again she's only 6 years old.