Instructions and covered skills
Read each code sample carefully before selecting an answer. Focus on the declarations that actually match the referenced element. Consider importance, origin, layer order, specificity, scope proximity, and source order in that sequence. Keep browser notifications and unrelated tabs closed while working. Do not infer behavior from class names alone; use the CSS rules shown. Choose the option that most directly explains the resulting style or the appropriate change. Review each selection before submitting your responses.
Key Areas
This test evaluates the ability to predict and deliberately control CSS cascade outcomes in production stylesheets. Candidates work with author declarations, normal and important declarations, named cascade layers, unlayered rules, selector specificity, source order, and scoped styles. They should understand that layer precedence is decided before specificity for declarations within the same origin and importance category. They should also recognize the different ordering applied to important declarations, where earlier layers take precedence over later layers and unlayered important declarations rank below layered important declarations.
Selector analysis includes IDs, classes, attributes, type selectors, pseudo-classes, pseudo-elements, and functional pseudo-classes. Candidates should be able to calculate the effects of :is(), :not(), :has(), and :where(), including the zero specificity contributed by :where(). The test also covers ties resolved by source order and by scoping proximity when matching declarations are in applicable @scope blocks. Questions use realistic component, utility, and vendor-style scenarios rather than isolated selector trivia.
Recommended Preparation
Review the cascade sorting order: relevance, origin and importance, encapsulation context where applicable, style attributes, layers, specificity, scoping proximity, and order of appearance. Practice tracing only the rules that match a target element, then eliminate candidates one cascade criterion at a time. Create small examples with a reset layer, a vendor layer, component styles, and unlayered application overrides. Compare the behavior of normal declarations with declarations marked !important rather than assuming they follow identical layer ordering.
Also practice calculating specificity as ID, class-like, and type-like components. Verify functional pseudo-class behavior with short browser experiments, especially when selector lists contain arguments of different weights. Learn to use low-specificity selectors for reusable defaults and reserve stronger selectors for intentional ownership boundaries. Familiarity with browser developer tools, including the Styles and Computed panels, helps validate which declaration wins and why.