Design a mini CSS selector engine
PremiumMachine codingHard
- CSS selectors
- DOM tree
- Recursive descent parser
Quick answer
This machine coding interview question asks you to design a mini CSS selector engine. Aim for a design that meets its requirements at the stated scale, then explain its main components, data flow and trade-offs. Interviewers want to see how you scope the problem, size it and defend each choice.
The problem
Build a mini CSS selector engine that finds elements in a DOM tree, like a small version of the browser's querySelectorAll. Given a tree and a selector such as div.card > p.title, #main a[href], it returns every matching element. The hard part is clean parsing and correct combinator matching.
The tree is already built for you. Each element has tagName (lower case), id (or null), classList (a set), attributes (a map), ordered children and parent. A small test helper builds trees from nested objects, so no HTML parsing is needed.
What must a mini CSS selector engine do?
- Query API: querySelectorAll(root, selector) returns matching descendants of root in document order with no duplicates; querySelector returns the first or null.
- Simple selectors: type (div), universal (*), id (#main), class (.card), and attributes [href] and [type="text"] with single or double quotes.
How well must it do it?
- Correct matching: Combinators follow browser rules, including ancestors above root, which may satisfy a combinator although only descendants of root are returned.
- Clean design: Tokenizer, parser, selector classes and matcher are separate and testable on their own.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- CSS selectors
- DOM tree
- Recursive descent parser
- Right to left matching
- Backtracking
- querySelectorAll
How you’ll practise
- Requirements
- Entities and interfaces
- Core implementation
- Edge cases and tests
- Extensions
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any machine coding design round.
- Clarifies the requirements before drawing anything
- Uses a few numbers that actually change the design
- Draws a clear path from the client to storage
- Picks storage and caching with reasons, not by habit
- Explains what breaks first under load and how to fix it
- States trade-offs openly instead of claiming a perfect design
Questions people ask about this interview question
- Which design type is this question?
- It is a machine coding question. You design a mini CSS selector engine and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Hard. It suits engineers preparing for senior interviews, where you are expected to drive the discussion and go deep on trade-offs.
- What should I cover first?
- Start with the requirements: what the system must do, how well it must do it and which numbers change the design. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team