Can combinators be used together with pseudo-classes or pseudo-elements?

0-2 years experience

1. 1How would you write a selector that targets a <button> that is a direct child of a <form> and is also in a :hover state?
2. 2If you use the selector 'ul > li:first-child', which elements are matched and why does the combinator work with the pseudo‑class?
3. 3What is the correct syntax to combine a sibling combinator with a ::after pseudo‑element, and what does it select?

2-5 years experience

1. 1A style using '.nav > li:hover::after' isn’t showing the ::after content. Walk me through how you’d debug the selector and CSS.
2. 2You need to style the last <li> inside a <ul> only when the <ul> has a .active class. Which selector would you choose, and why would you combine a combinator with a pseudo‑class?
3. 3Discuss the trade‑offs between using a descendant combinator with :focus-visible versus adding a helper class via JavaScript for accessibility.

5-8 years experience

1. 1Our design system requires any <input> inside a .form-group that is focused to display a custom ::placeholder style. How would you implement this at scale while keeping specificity manageable?
2. 2Developers have used sibling combinators with ::before to create decorative separators, but we’re seeing performance regressions. How would you assess the impact and improve it?
3. 3When refactoring a legacy selector that mixes child combinators and :nth-child, what strategy would you use to simplify it without breaking edge‑case layouts?

8+ years experience

1. 1We’re migrating a monolithic stylesheet to a CSS‑in‑JS solution. How would you handle existing selectors that rely on combinators together with pseudo‑elements to preserve visual fidelity and avoid specificity wars?
2. 2Multiple product teams have inconsistent patterns for using combinators with pseudo‑classes in theming. Propose a governance model or tooling that enforces best practices while allowing flexibility.
3. 3If we need to emulate a parent‑selector pattern in a legacy browser that lacks :has(), how would you architect a solution using combinators and pseudo‑elements without inflating the stylesheet size?