mediumnot is where
How is specificity calculated for :is() and :where(), and how do they differ?
:where(#sidebar) a
:is(#sidebar) aCSS · PRACTICE
CSS interview questions.
CSS decides layout and paint. Most bugs come from the cascade, stacking contexts, and containing blocks rather than from the properties themselves.
527questions
128easy
198medium
201hard
Specificity maths, margin collapsing, what creates a new stacking or containing block, flex versus grid sizing, and which properties can be animated cheaply.
Where it shows up: Frontend roles, design-system teams, and anywhere responsive or themeable UI is built.
Sample CSS questions
Twenty real CSS questions from the library, code snippet included. Nothing here is paraphrased for search engines. It is the same text a signed-in user sees.
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; }mediumbefore after pseudo-elements
What does the ::after element display?
.item { counter-reset: x 5; }
.item::after {
counter-increment: x 2;
content: counter(x);
}mediumattribute and nth-child
How many elements does :nth-child(3n+1) select among 10 sibling items, and which positions?
li:nth-child(3n+1)mediumauto-fit auto-fill minmax
With repeat(auto-fill, minmax(200px, 1fr)) on a 700px container (no gap) holding 2 items, how do the columns and items render?
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));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
Given the rule below, which elements does it select?
:is(a, button):not(.sidebar a, .sidebar button) { color: red; }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);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>mediumcombinators
Which element does `h2 ~ p` select?
<h2>Title</h2>
<p>One</p>
<div></div>
<p>Two</p>easycolor and background
What color will the text be?
p {
color: #00ff0080;
}mediumkeyframes
In the keyframes below, what `background-color` does the element have at 50% of the animation?
@keyframes c {
0% { background-color: black; }
50% { background-color: red; }
50% { background-color: blue; }
100% { background-color: white; }
}mediumbefore after pseudo-elements
Why does the `::before` pseudo-element NOT appear for the `<img>` below?
img::before { content: "\2605"; }mediumobject-fit background-size
A 600x400 image sits in a 300x300 `<img>` styled with `object-fit: contain`. What is rendered?
.thumb {
width: 300px;
height: 300px;
object-fit: contain;
}mediumgrid template rows cols areas
In this grid, how tall is the second row at render time?
.grid {
display: grid;
height: 600px;
grid-template-rows: 100px 1fr min-content;
}
/* row 3 content is a single line of 20px text, no padding */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; }mediumresponsive type clamp
Given this rule, what computed font-size does the browser apply when the viewport is 1px wide (i.e. extremely narrow)?
h1 {
font-size: clamp(1rem, 2.5vw + 0.5rem, 3rem);
}
/* Assume the root font-size is 16px and is not overridden. */mediumgrid template rows cols areas
Given this grid, which area does the cell with content 'X' occupy?
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"head head head"
"nav main main"
"nav foot foot";
}
.x { grid-area: nav; } /* element .x contains 'X' */mediumz-index everyday
Two positioned siblings overlap. Box A has z-index: 9999 and Box B has z-index: 1, but A renders behind B. Which single explanation is consistent with this?
<div class="parent-a"> <!-- opacity: 0.99; -->
<div class="a">A</div> <!-- position: relative; z-index: 9999 -->
</div>
<div class="parent-b"> <!-- no special props -->
<div class="b">B</div> <!-- position: relative; z-index: 1 -->
</div>mediumz-index everyday
An element has position: static and z-index: 5. Two such static siblings overlap. What determines which one paints on top?
.box { position: static; z-index: 5; }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 answer options and the worked explanation for every CSS question stay behind a free account. Signing in is free and takes a few seconds.
CSS topics covered
43 distinct CSS topics are tagged across the library. These are the real topic labels stored on the questions, not a hand-written list.
- color and background (29)
- grid template rows cols areas (26)
- the box model (25)
- attribute and nth-child (25)
- font-size family (24)
- keyframes (18)
- transforms (17)
- before after pseudo-elements (16)
- cascade order and origins (16)
- width height (15)
- block formatting context (15)
- contain layout paint size (15)
- transitions and easing (15)
- not is where (15)
- combinators (14)
- stacking contexts (13)
- calc clamp min max (12)
- logical properties (12)
- margin padding (11)
- custom properties (11)
- sticky (10)
- color spaces oklch color-mix (10)
- GPU compositing layer promotion (10)
- property registration (10)
- containing-block resolution (10)
- scroll-driven animations (10)
- auto-fit auto-fill minmax (9)
- container-query internals (9)
- responsive type clamp (8)
- reflow paint composite pipeline (8)
- scope (8)
- layer cascade layers (8)
- content-visibility (7)
- specificity algorithm (7)
- gradients (7)
- aspect-ratio (7)
- z-index everyday (6)
- subgrid track inheritance (6)
- has relational selector (6)
- will-change cost (6)
- background-size (5)
- object-fit background-size (5)
- object-fit (5)
Search and filter every CSS question
…
Difficulty