Pick the Right Elements

So far each rule had one selector: a tag like h1 or a class like .price. You can also combine selectors to pick exactly the elements you want.

A group lists selectors with commas, and the rule applies to each of them: h3, footer. A descendant selector is two selectors with a space: footer a matches every link anywhere inside the footer. A child selector puts > between them: .menu > li matches only the li elements directly inside .menu, not ones nested deeper.

aside p {
  font-style: italic;
}

This rule makes the paragraphs inside the aside italic, and no other paragraph. The check prints how many elements each of your rules matches, and the value each element gets:

> the style of h1, h2 (2 elements, window 1024 px wide)
  h1 "Corner Shop"
    font-family: Georgia, serif   <- h1
  h2 "Our products"
    font-family: Georgia, serif   <- h2
> the style of nav a (2 elements, window 1024 px wide)
  a "Home"
    text-decoration: none   <- nav a
  a "Cart"
    text-decoration: none   <- nav a
> the style of .products > li (3 elements, window 1024 px wide)
  li#mug.card "Mug $12 Buy"
    padding: 12px   <- .products > li
  li#notebook.card.sold-out "Notebook Out of stock $7 Buy"
    padding: 12px   <- .products > li
  li#lamp.card.sale "Lamp Sale $29 Buy"
    padding: 12px   <- .products > li

Your task: below the .badge rule, write three rules: a group for h1 and h2 that sets font-family: Georgia, serif, a descendant rule for the links inside nav that sets text-decoration: none, and a child rule for the li elements directly inside .products that sets padding: 12px.

Assignment
Follow the Coding Tutorial to write a group, a descendant and a child selector in styles.css, each with one declaration.

Hint
A comma means "this one and that one". A space means "inside, at any depth". A > means "directly inside".