CSS Selection property

Question

Assume that the evergreen, fruit, and leaf classes are not used elsewhere on the page. What selector will select the apple tree, but none of the others?

<ul id="forest">
 <li class="evergreen"><a>pine</a></li>
 <li class="evergreen"><a>lodgepole</a></li>
 <li class="evergreen fruit"><a>holly</a></li>
 <li class="leaf fruit"><a>apple</a></li>
 <li class="leaf"><a>oak</a></li>
 <li class="leaf"><a>maple</a></li>
</ul>

Answer 1

You can select the apple tree like this:

#forest .leaf.fruit {
    font-weight: bold;
}

But maybe you could use more specific classnames

Answer 2

For selecting with CSS:

.leaf.fruit{
  background-color:red;
}

Safe way is to refer the ul as well: #forest > .leaf.fruit{

This only works in this case as you have no element with has both the leaf and fruit class assigned

Other option with CSS:

According to https://stackoverflow.com/a/1520501/9167318

If you update your markup to:
<li class="leaf fruit" fruit='apple'><a>apple</a></li>

For selecting the node with the text apple, you could use:

li[fruit*='apple']{
  background-color:red;
}

Answer 3

This will do:

li[class="leaf fruit"] {
  color:red;
}

<ul id="forest">
 <li class="evergreen"><a>pine</a></li>
 <li class="evergreen"><a>lodgepole</a></li>
 <li class="evergreen fruit"><a>holly</a></li>
 <li class="leaf fruit"><a>apple</a></li>
 <li class="leaf"><a>oak</a></li>
 <li class="leaf"><a>maple</a></li>
</ul>

Answer 4

Alternate solution

li:not(.evergreen).fruit

Answer 5

.leaf.fruit

It is the answer to the edx css selectors it is the right answer

Answer 6

ul#forest li.leaf.fruit a{
   color: red;
}