Specificity Quiz

Given this HTML:

<p id="abstract" class="subtitle">Hello, world!</p>

And this CSS:

#abstract {
  background-color: darkkhaki;
}

p {
  background-color: dimgray;
}

.subtitle {
  background-color: mediumorchid;
}

What will the background color of the paragraph be?

Given this HTML:

<nav class="primary">
  <a href="#" class="navigation">Home</a>
</nav>

And this CSS:

.primary a {
  font-size: 16px;
}

nav a.navigation {
  font-size: 18px;
}

What will the font size of the link be?

Given this HTML:

<div id="main" class="container">
    <article id="content">
        <ul class="top-list">
            <li class="list-item">Item 1</li>
        </ul>
    </article>
</div>

And this CSS:

div article ul li {
    color: gold;
}

.container > #content li.list-item {
    color: forestgreen;
}

#main #content li {
    color: hotpink;
}

.container .top-list .list-item {
    color: darkorange;
}

What color will the li be?

Given this HTML:

<article class="news">
  <h1 class="headline">This just in!</h1>
  <p class="abstract">Abstract</p>
  <p>Paragraph 1</p>
</article>

And this CSS:

body {
  font-size: 10px;
}

.news {
  font-size: 12px;
}

.news h1 + p {
  font-style: italic;
  font-size: 14px;
}

.news .abstract {
  font-size: 16px;
}

What font sizes will the abstract paragraph and other paragraph be, respectively?

Given this HTML:

<section id="app">
  <ul class="products">
    <li class="product">
      <div class="showcase">
        <img src="/img1.jpg">
        <span class="price">$5.99</span>
      </div>
    </li>
    <li class="product">
      <div class="showcase">
        <img src="/img2.jpg">
        <span class="price">$29.99</span>
      </div>
    </li>
  </ul>
</section>

And this CSS:

.app .products .product .showcase .price {
  color: limegreen;
}

.products > li > div > span {
  color: salmon;
}

div .price {
  color: maroon;
}

#app > .price {
  color: navy;
}

What color will the prices be?

Given this HTML:

<aside class="sitemap">
  <ul class="pages">
    <li>A</li>
    <li>B</li>
    <li>C
      <ul>
        <li>D</li>
        <li class="featured">E</li>
        <li>F</li>
      </ul>
      <li>G</li>
      <ul>
        <li>H
          <ul>
            <li class="featured">I</li>
            <li>J</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</aside>

And this CSS:

.sitemap li {
  color: teal;
}

.pages > li > ul > li {
  color: red
}

.featured {
  color: orangered;
}

.pages .featured {
  color: plum;
}

.sitemap li:first-child {
  color: deeppink;
}

Which of the list items will be teal?