HTML & CSS · Senior · Question 3 of 75

What does `@scope (.card) to (.card__content) { img { ... } }` do?

✓Correct answer: Styles img inside .card, but not inside .card__content
2Styles img only inside a .card__content nested in .card
3Creates a Shadow DOM for .card and isolates its styles from the page

Explanation

@scope defines a scope root and an optional "lower boundary" (donut scope): styles apply inside .card but don't reach into .card__content and its descendants. In addition, with equal specificity the rule with the closer root wins (scoping proximity). @scope doesn't create a Shadow DOM.

What does `@scope (.card) to (.card__content) { img { ... } }` do?

Explanation

Further reading

Problem with a question

Test yourself

What does @scope (.card) to (.card__content) { img { ... } } do?

Explanation

Further reading

Test yourself

What does `@scope (.card) to (.card__content) { img { ... } }` do?