Test your knowledge: CSS Selectors

Review

1. What does the bare selector p match?

   A type selector matches elements by their element name, which is useful when the same presentation should apply to every element of that type. Punctuation-free selectors are element names, full stop.
2. Which selector matches elements carrying class="card"?

   A class selector begins with a period followed by the class name, and it targets elements that share that class without requiring them to have the same element name.
3. A page contains <h2 id="headline">. Which selector matches it?

   An ID selector begins with a number sign followed by an identifier, and it matches the element whose id is that value. One page should hold one such element, which is exactly what makes it an id.
4. Which statement about class and ID selectors is the one to build on?

   Classes are reusable by design, so one class can dress a paragraph, a list item, and an aside at once. An ID matches one element per page, which is why styling with classes keeps a stylesheet flexible.
5. A .note class is written onto a <p>, an <li>, and an <aside>. What does that let the author do?

   A class selector targets elements that share the class regardless of their element names, which is what lets a note look like a note wherever it appears. The class itself is supplied by the document, through the HTML class attribute.
6. Which declaration makes the `svg|circle` selector meaningful for SVG elements?

   The CSS Namespaces specification defines `@namespace` as the mechanism for binding a CSS namespace prefix.
7. Which pseudo-class matches when any selector in its argument list matches?

   `:is()` is the matches-any pseudo-class.
8. What specificity does `:where(.note)` contribute?

   The `:where()` pseudo-class contributes zero specificity, including the selectors inside it.
9. What does `.card:has(> img)` match?

   `:has()` matches the candidate `.card` when its relative selector `> img` matches from that candidate as the anchor.
10. What does `of .featured` change in `:nth-child(2n of .featured)`?

    The `of S` clause filters which siblings participate in the index calculation.