Is it possible to use SCSS to change the background color of a li element based on whether its child is a strong tag or not?
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>