0

I have this ul and all the inactive li have a span, but the active ones have a strong! My question is if its possible with purely SCSS to change the backgroud-color for example of the li if its child is strong!!

li {
  margin-left: 3px;
  margin-bottom: 3px;
  border: solid transparent;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #004f5b;
  font-size: 24px;
  font-weight: 900;
  color: #004f5b;
  box-sizing: border-box;
  padding: 6px 68px;
  /*this only adds the background over the strong but not the whole li*/
  &>strong {
    background-color: red;
  }
}
<ul>
  <li>
    <span>1</span>
  </li>
  <li>
    <strong>2</strong>
  </li>
  <li>
    <span>3</span>
  </li>
  <li>
    <span>4</span>
  </li>
  <li>
    <span>5</span>
  </li>
  <li>
    <span>6</span>
  </li>
  <li>
    <span>7</span>
  </li>
</ul>
Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
felixo
  • 1,453
  • 6
  • 33
  • 60
  • 1
    You can’t change a parent element’s styling within the child. So the short answer is no, this can’t be done. You’ll have to add a class to the
  • itself
    • – andrewtweber Apr 05 '19 at 13:11