mediumnot is where
How is specificity calculated for :is() and :where(), and how do they differ?
:where(#sidebar) a
:is(#sidebar) awhy this works
Built for CSS mastery, not memorisation.
Every question is hand-checked, every answer comes with an explanation, and your progress builds into a clear picture of where you stand.
The snippet is on the page
Every CSS question shows its code before you answer, so you are reading real CSS, not a description of it.
A written explanation, always
Once you attempt a question you get the reasoning, not just a tick. That matters most on CSS, where specificity maths, margin collapsing, what creates a new stacking or containing block, flex versus grid sizing, and which properties can be animated cheaply.
Your weak topics, named
Progress is tracked per topic across the 43 CSS topics, so revision points at the gaps instead of the whole list.
faq
Things people ask.
How many CSS MCQs are on Journey Uncommon?
527 CSS questions right now: 128 easy, 198 medium and 201 hard. That number is read straight from the question table when this page is built, so it is never a rounded marketing figure.
Do I need an account to read the CSS questions?
No. Every CSS question, including its code snippet, its difficulty and its topic, is readable without signing in. You need a free account only to submit an answer, see which option is correct, and read the worked explanation. We keep it that way so the platform stays honest about what you actually got right.
What do CSS interviewers actually test?
Specificity maths, margin collapsing, what creates a new stacking or containing block, flex versus grid sizing, and which properties can be animated cheaply.
Which CSS topics are covered?
43 distinct topics are tagged on the CSS questions, including color and background, grid template rows cols areas, the box model, attribute and nth-child, font-size family, keyframes. The topic labels come from the questions themselves, so the list matches what you will actually be asked.
Is CSS practice free?
Yes. Reading is free and unlimited. A free account unlocks answering, explanations and progress tracking. Pro (₹199 per month) adds AI explanations and AI-graded guesstimates on top; it is not needed to practise CSS MCQs.
Where is CSS used in real jobs?
Frontend roles, design-system teams, and anywhere responsive or themeable UI is built.
What a CSS question here actually looks like
These are 12 of the 527 CSS questions in the library, pulled live from the question table. The snippet, the difficulty and the topic are all here. The answer options and the explanation are not. Those need a free account.
Specificity maths, margin collapsing, what creates a new stacking or containing block, flex versus grid sizing, and which properties can be animated cheaply.
Sample CSS MCQs
mediumobject-fit background-size
A developer applies `object-fit: cover` to a `<div>` and to a `<span>` that wraps text, expecting the content to be cropped to the box. What actually happens?
div, span {
width: 200px;
height: 200px;
object-fit: cover;
}hardcontaining-block resolution
A `position: fixed` element with `top: 0; left: 0` normally uses the viewport as its containing block. What is happening at the box-tree level when an ancestor with `transform: translateZ(0)` changes that?
.ancestor { transform: translateZ(0); }
.fixed-child { position: fixed; top: 0; left: 0; width: 50%; }hardcontainer-query internals
Why must a container-query container declare `container-type: inline-size` (or `size`) rather than the engine just querying any ancestor's width, and what containment does that imply?
.card-wrap { container-type: inline-size; }hardblock formatting context
Why does adding `overflow: hidden` to a parent make it grow to contain its floated children, when removing it lets the children spill out?
.parent { overflow: hidden; }
.parent > .child { float: left; height: 80px; }easycolor and background
What color will the text be?
p {
color: #00ff0080;
}mediumauto-fit auto-fill minmax
What is wrong with `repeat(auto-fit, 200px)` compared to `repeat(auto-fit, minmax(200px, 1fr))`?
grid-template-columns: repeat(auto-fit, 200px);mediumgrid template rows cols areas
In a CSS Grid, what does the `grid-template-areas` value require for the layout to be valid?
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"sidebar main";
}mediumnot is where
What does `:is(header, footer) a:hover` match?
:is(header, footer) a:hover { text-decoration: underline; }mediumnot is where
Why does the child combinator in `:where(.a, .b) > span` not raise the rule's specificity above that of a plain element selector?
:where(.a, .b) > span { color: red; }mediumcombinators
Which element does `h2 ~ p` select?
<h2>Title</h2>
<p>One</p>
<div></div>
<p>Two</p>mediumattribute and nth-child
Which input does `input[type="text"]:nth-of-type(3)` match in this form?
<form>
<input type="text"> <!-- input 1 -->
<input type="email"> <!-- input 2 -->
<input type="text"> <!-- input 3 -->
</form>Sign in to answer
Everything above is free to read. Answering needs a free account.
We keep the correct answer, the explanation and the scoring behind sign-in so the platform stays honest, which is why the correct option and the worked explanation for every CSS question stay behind a free account. Signing in is free and takes a few seconds.
Where CSS shows up
Frontend roles, design-system teams, and anywhere responsive or themeable UI is built.