ExplorerAnimals

Two Classes, One Tree

Stack class names like .tree.pine to pick out just one kind.

Goal: Color all trees green, then make pines dark and maples red.

Auto run

Your goals

0 of 3 done

Use .tree to make every tree greennot completed yet
Use .tree.pine to make pines a darker greennot completed yet
Use .tree.maple to make maples rednot completed yet

index.htmlhtml

<div class="forest">
  <div class="tree oak"></div>
  <div class="tree pine"></div>
  <div class="tree maple"></div>
  <div class="tree pine tall"></div>
</div>

style.csscss

.forest {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  padding: 24px;
  height: 260px;
  background-color: lightyellow;
  border-radius: 20px;
}

.tree {
  width: 60px;
  height: 120px;
  border-radius: 50% 50% 12% 12%;
  background-color: white; /* every tree */
}

.tree.tall { height: 170px; }

/* Add .tree.pine and .tree.maple rules below */

preview

Up next

Parrot Color Ways

Next activity →