CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

:only child, tad confused...

All span elements marked confused return in the #52bab3 color declared below; however, the span elements marked understand only return that color for elements matching :only child. I know iv'e gone wrong somewhere, but I cannot seem to return any color over than #52bab3 for the span elements nested in the <li> when using Only Child. I'm Just trying to get my head around this and if you could explain why this is happening It would be amazing.... Thank you if you can get back to me on this as Ive tried the last hour to figure it out :)....

span:only-child{
    color: #52bab3;
     font-size: 1.8em;
}
  <div>
  <h1>Psuedo Selectors</h1>    </div>
    <ul>
        <li>Item 1</li>
        <li>Item 2 <span>&check;</span></li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6<span><span><span><h1>confused</h1></span> <span><span>confused</span>confused</span></span></span></li>
        <li></li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>

<span><span><h1>understand</h1></span> <span><span>understand</span>understand</span></span>



</body>

1 Answer

Steven Parker
Steven Parker
203,269 Points

I'm not sure I understand what's confusing you, but the nested spans are only children of the span around them, so the CSS rule is applied to them.

It might help to make the HTML more readable by using indentation to indicate nesting levels:

  <li>Item 6
    <span>
      <span>
        <span><h1>confused</h1></span>
        <span>
          <span>confused</span>
          confused
        </span>
      </span>
    </span>
  </li>

To further confuse things, the "color" property is inherited by child elements even if they are not only children or spans themselves.

Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

Thanks Steven, I've figured it out now. I was trying to make the checkmarks regarding the lesson stay grey and tried many different approaches to do so, when using :only child I'm not sure why but when I had 2 <span> elements next to each other they still both inherited the 52bab3 colour; instead of turning grey as they were sibling elements instead of only childs (if thats correct). Thanks again though :)

Steven Parker
Steven Parker
203,269 Points

But the nested spans inside the siblings were also "only child" elements. :wink:

hello sam when i watched this video i also was a bit confused but i had figured it out only-child selector doesn't know anything outside of our body in html they are only bounded inside a body they can't know outside body of our html page when we are talking about any tag suppose <h1>tag is a child of body so you will think that we can use :only-child to select only the body element and as we know that body has only <h1> so you will think that my style will apply on it by :only-child but no it will wont apply because it will think as <h1> as the root element and if you put inside<h1>for example <span> it will apply those style to the span because it will think <span> as the only child of <h1> if you want to put the styles to the including <span> <h1> you will wrap the <h1> element inside a <div> then apply :only-child.then it will defeinitely works