:has()
:has() HTML:
<li>
<p>First paragraph</p>
<p>Second paragraph</p>
</li>
<li>
<p>Only one paragraph</p>
</li>
:has() CSS:
li:has(p + p) {
color: rgb(27, 179, 179);
}
This selectslielements that have two consecutivepelements as direct children.
:is()
Suppose you have a website with multiple sections like<section> <article> <aside> <nav>, and you want to style all headings (h1 h2 h3 h4 h5 h6) within these sections uniformly.
Without:is()
You would typically write a long list of selectors:
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
With:is(), you can simplify this to:
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
What is the CSS box model?
Every element is a rectangular box: content → padding → border → margin. Total rendered size depends on box-sizing.
What is the difference between box-sizing: content-box and border-box?
content-box (default): width = content only; padding and border are added on top. border-box: width includes padding + border.
What are the main Flexbox axis concepts?
Main axis: direction of flex items (set by flex-direction). Cross axis: perpendicular. justify-content aligns on main; align-items on cross.
What does flex: 1 mean?
Shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0% — item grows to fill available space equally with siblings.
What is the difference between align-items and align-self in Flexbox?
align-items sets the default alignment for all children on the cross axis. align-self overrides it for a single child.
What is CSS Grid and how does it differ from Flexbox?
Grid is 2D (rows + columns simultaneously). Flexbox is 1D (row or column). Use Grid for overall page layout; Flexbox for component-level alignment.
How do you create a 3-column equal-width grid in CSS?
grid-template-columns: repeat(3, 1fr) — 1fr distributes free space equally.
What is a stacking context in CSS?
An element forming its own z-index layer. Created by: position + z-index (non-auto), opacity < 1, transform, filter, will-change, isolation: isolate.
How does CSS specificity work?
Inline styles > ID selectors > class/attribute/pseudo-class > element selectors. Equal specificity → later rule wins.
What is the CSS cascade?
Algorithm resolving rule conflicts: origin (user-agent < author < inline) → specificity → source order.
What are CSS custom properties (variables)?
Defined with --name: value in a selector scope; used with var(--name). They cascade and inherit like other CSS properties.
What is the difference between CSS transition and @keyframes animation?
transition: animates between two states triggered by a property change. @keyframes + animation: multi-step animation with full control over intermediate states.
Which CSS properties are GPU-composited and cheap to animate?
transform and opacity — they skip layout and paint, handled entirely by the compositor thread. Avoid animating width, height, top, left.
What is the difference between visibility: hidden and display: none?
visibility: hidden: element is invisible but still occupies space. display: none: element is removed from layout (no space).
What is position: sticky?
Element is positioned normally until a scroll threshold — then it sticks relative to the nearest scrolling ancestor. Requires a top/bottom value.
What does z-index apply to?
Only elements with position other than static (or certain properties creating a stacking context). Higher z-index = painted on top within the same stacking context.
What are CSS pseudo-elements vs pseudo-classes?
Pseudo-class (:hover, :nth-child): targets element in a state. Pseudo-element (::before, ::after): targets a part of the element or creates a virtual child.
