mediumnot is where
How is specificity calculated for :is() and :where(), and how do they differ?
:where(#sidebar) a
:is(#sidebar) aCSS Essentials
Box model, flex, grid. Make layouts behave.
- Questions
- 10
- Tier
- Starter
- Language
- CSS
- Time
- ~10 min
Difficulty mix: 6 easy, 3 medium and 1 hard. The questions are drawn from the CSS library at the moment you start, so sitting the test twice does not give you the same paper.
What this test can pull from
43 CSS topics are in scope. These are the real topic labels on the questions.
- color and background
- grid template rows cols areas
- the box model
- attribute and nth-child
- font-size family
- keyframes
- transforms
- before after pseudo-elements
- cascade order and origins
- width height
- block formatting context
- contain layout paint size
- transitions and easing
- not is where
- combinators
- stacking contexts
- calc clamp min max
- logical properties
- margin padding
- custom properties
- sticky
- color spaces oklch color-mix
- GPU compositing layer promotion
- property registration
- containing-block resolution
- scroll-driven animations
- auto-fit auto-fill minmax
- container-query internals
- responsive type clamp
- reflow paint composite pipeline
Questions of the kind this test asks
Six real CSS questions from the same pool, snippet included. The answer options and explanations are not shown here. Those come after you attempt them.
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;
}Prefer to pick your own questions? Browse all CSS questions. See the other 10 tests.