CodePark/ questions / Modern CSS
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Modern CSS

In native CSS nesting, what selectors do the two nested rules produce?

.card {
  color: black;
  &:hover { color: blue; }
  .title { font-weight: bold; }
}
.card:hover and .card .title

.card:hover and .card .title is right. & is replaced by the parent selector with no space, so &:hover gives .card:hover. A nested selector without & is treated as a descendant, so .title becomes .card .title.

The ".title rule is invalid without &" option is the tempting wrong answer. Native nesting no longer requires & before a class. The .card.title option is also wrong. You would need &.title to get that compound selector, meaning one element with both classes.