:only-child no working as expected?

Question

When I add <h1> as another child of <body> in addition to <ul>. The pseudo selector still applies the effect, but only font-size takes place. Color property does not apply, though.

It's supposed to be like the instruction video where neither of them get the effect of :only-child. But here, one property applies while another one is ignored. This is so confusing to me.

HTML:

<!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>
  <h1>My List:</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li></li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>

CSS:

/* Structural Pseudo-classes------------------ */

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

li:last-child {
  border: none;
}

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

:empty {
  background-color: tomato;
}

Snapshot if you want to look at: https://w.trhou.se/gy28p8x7fe

Answer 1 · 2017-12-26T04:41:40Z

December 26, 2017 4:41am

I don't know when this video was recorded but looking at the documentation for the :only-child selector it does appear that there has been a small (but somewhat significant) change in how it works since it was introduced.

That change is that originally it only targeted elements that had a parent element, in the new revision it does not have this requirement, it will select any non-sibling element regardless of whether it has parents or not.

This is significant because it causes it to actually target the html element, since that is technically speaking an element which has no sibling. And since font-size is a property that can be inherited the h1, ul and li elements end up inheriting the font-size from the html element.

The color property is not inherited due to the fact that you specify a color for the body element inside the style tag, so the h1, ul and li elements ends up inheriting their color from that instead.

If you change your selector so that it only applies to elements within the body element like this:

/* Do note the space between body and :only-child, that is required and not a typo */
body :only-child {
  color: #52bab3;
  font-size: 1.5em;
}

Then it should act the same way that it does in the video.

The space is needed because this is a descendant selector that targets elements with no siblings within the body element. If you had no space between the selectors like this body:only-child then the selectors would instead be combined and only target elements with a tag of body which have no siblings.

Edit: Added extra info on the space in the selector.

Welcome to the Treehouse Community

Looking to learn something new?

bobdeei

bobdeei

:only-child no working as expected?

1 Answer

andren

andren

bobdeei

bobdeei

andren

andren