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 11,301 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
182,578 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>
Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 11,301 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
182,578 Points

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