ReactJS Interview Prep - CSS Fundamentals (Part 6)

Question 1

What does the powerful `:has()` pseudo-class selector do?

Accepted Answer

Correct Answer

Answer

It acts as a boolean check in JavaScript.

Answer

It acts as a 'parent selector'. It selects an element ONLY if it contains a certain descendant or matches a certain condition (e.g., `figure:has(figcaption)` selects only figures that contain a caption).

Answer

It selects elements based on their data attributes.

Answer

It checks if a font file has been fully downloaded.

Question 2

What is a 'Container Query' (`@container`)?

Accepted Answer

Correct Answer

Answer

A query used in Docker to manage web containers.

Answer

A way to apply styles to an element based on the size of its parent container, rather than the size of the entire browser viewport (like standard `@media` queries).

Answer

A media query specifically targeting CSS Grid containers.

Answer

A rule that limits the maximum width of a `

`.

Question 3

How do you set up an element to be queried by a Container Query?

Accepted Answer

Correct Answer

Answer

By setting `display: container;` on the parent.

Answer

By defining `container-type: inline-size;` on the parent element you want to measure.

Answer

By wrapping it in an `<iframe>`.

Answer

No setup is required; `@container` works globally.

Question 4

What does the `clamp()` function do in CSS?

Accepted Answer

Correct Answer

Answer

It securely restricts the user from zooming in on mobile.

Answer

It sets a value that fluidly scales between a defined minimum bound and a maximum bound (e.g., `clamp(1rem, 2.5vw, 2rem)` for fluid typography).

Answer

It limits the number of visible lines of text.

Answer

It forces an element to stay within the viewport bounds.

Question 5

What is the difference between `vh` / `vw` and the newer `dvh` / `dvw` viewport units?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

`dvh` (Dynamic Viewport Height) accounts for mobile browser UI (like the URL bar) that dynamically expands and retracts when the user scrolls, whereas `vh` assumes the UI is always static.

Answer

`dvh` is for desktop screens, `vh` is for mobile screens.

Answer

`dvh` creates a 3D isometric perspective.

Question 6

Which pseudo-class targets an element that is currently uniquely matched by the URL's hash fragment (e.g., targeting `#section-2` when the URL is `example.com/#section-2`)?

Accepted Answer

Correct Answer

Answer

`:active`

Answer

`:target`

Answer

`:focus`

Answer

`:current`

Question 7

What does the `:is()` pseudo-class function achieve?

Accepted Answer

Correct Answer

Answer

It checks if a JavaScript variable is true.

Answer

It takes a selector list and selects any element that can be selected by one of the selectors in that list, drastically shortening long CSS selectors while maintaining the specificity of the most specific item.

Answer

It restricts a style to only apply to Internet Explorer.

Answer

It defines the default state of a checkbox.

Question 8

How does `:where()` differ from `:is()`?

Accepted Answer

Correct Answer

Answer

They are identical aliases.

Answer

`:is()` calculates its specificity based on the most specific selector in its list. `:where()` always has a specificity of 0, making it very easy to override.

Answer

`:where()` only works on class names.

Answer

`:is()` requires JavaScript.

Question 9

What is a 'CSS Sprite'? (Historical context)

Accepted Answer

Correct Answer

Answer

A hardware-accelerated CSS animation.

Answer

Combining multiple small images (like icons) into a single large image file, and using `background-position` to show only the specific icon needed, drastically reducing HTTP requests.

Answer

A malicious script injected via CSS.

Answer

A lightweight version of the CSS Box Model.

Question 10

Which CSS property disables the user's ability to highlight and copy text?

Accepted Answer

Correct Answer

Answer

`text-highlight: none;`

Answer

`user-select: none;`

Answer

`selection: disabled;`

Answer

`pointer-events: none;`

Question 11

What does the `appearance: none;` property do?

Accepted Answer

Correct Answer

Answer

It makes the element completely invisible (opacity 0).

Answer

It strips away all OS-level native styling from form controls (like the default styling of a `<select>` dropdown arrow or a checkbox), allowing you to style them completely from scratch.

Answer

It disables CSS animations on the element.

Answer

It removes the element from the accessibility tree.

Question 12

What does the CSS `all` property do (e.g., `all: unset;`)?

Accepted Answer

Correct Answer

Answer

It selects every single element on the page.

Answer

It resets all of the element's properties (except `unicode-bidi` and `direction`) to their initial or inherited values, effectively wiping the slate clean.

Answer

It applies the `!important` flag to all rules in the block.

Answer

It forces hardware acceleration on all child elements.

Question 13

What is the `caret-color` property used for?

Accepted Answer

Correct Answer

Answer

Changing the color of the bullet points in a list.

Answer

Changing the color of the blinking text insertion cursor (the caret) in an `<input>` or `contenteditable` element.

Answer

Changing the color of the dropdown arrow in a select box.

Answer

Defining the color of a specific CSS shape.

Question 14

How do you style the placeholder text of an `<input>` element?

Accepted Answer

Correct Answer

Answer

`input:placeholder { ... }`

Answer

`input::placeholder { ... }`

Answer

`input.placeholder { ... }`

Answer

`input[type="placeholder"] { ... }`

Question 15

Which pseudo-class targets form elements whose data fails HTML validation (e.g., an empty `<input required>`)?

Accepted Answer

Correct Answer

Answer

:error

Answer

:invalid

Answer

:failed

Answer

:wrong

Question 16

What does the `counter-increment` property achieve in CSS?

Accepted Answer

Correct Answer

Answer

It automatically increments an integer variable used for numbering elements (like headers or list items) natively in CSS, which can be displayed using the `content` property.

Answer

It increments the z-index of overlapping elements.

Answer

It acts as a loop counter inside SCSS `@for` loops.

Answer

It counts the number of times a user clicks a button.

Question 17

What does `filter: drop-shadow(...)` do differently than `box-shadow(...)`?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

`box-shadow` applies a shadow to the rectangular bounds of the element. `drop-shadow` applies a shadow strictly to the non-transparent pixels (the alpha channel), meaning it perfectly shadows the exact shape of a transparent PNG or SVG.

Answer

`drop-shadow` is hardware accelerated.

Answer

`box-shadow` only works on text.

Question 18

What is the function of the `:first-of-type` pseudo-class?

Accepted Answer

Correct Answer

Answer

It selects the very first child element, regardless of its tag name.

Answer

It selects the first sibling of a specific given element type (e.g., the first `

` among siblings), even if other elements precede it.

Answer

It selects the first letter of a paragraph.

Answer

It targets the first font loaded by `@font-face`.

Question 19

What does the `currentColor` CSS keyword do?

Accepted Answer

Correct Answer

Answer

It acts as a variable that evaluates to the current value of the `color` property of the element, allowing properties like borders, shadows, or SVG fills to automatically inherit the text color.

Answer

It targets the background color of the `<body>`.

Answer

It dynamically selects the opposite (complementary) color of the text.

Answer

It applies the default link blue color.

Question 20

How do you prevent an element from breaking across pages when the user prints the webpage?

Accepted Answer

Correct Answer

Answer

`page-break-inside: avoid;` (or the newer `break-inside: avoid;`)

Answer

`print-break: false;`

Answer

`display: no-print-break;`

Answer

`@media print { overflow: hidden; }`

Question 21

What does the `@layer` CSS rule (Cascade Layers) accomplish?

Accepted Answer

Correct Answer

Answer

It dictates the z-index stacking context for 3D elements.

Answer

It creates explicit 'layers' of CSS (e.g., reset, framework, utilities). The browser determines priority based on the layer order, virtually eliminating specificity conflicts between different parts of the codebase.

Answer

It is used exclusively to layer background images.

Answer

It separates HTML markup from CSS styling.

Question 22

What is the difference between `white-space: nowrap;` and `white-space: pre;`?

Accepted Answer

Correct Answer

Answer

`nowrap` collapses multiple spaces into one and prevents line wrapping. `pre` prevents line wrapping but strictly preserves all whitespace and line breaks exactly as authored in the HTML source.

Answer

They are identical.

Answer

`pre` applies a monospace font.

Answer

`nowrap` is only for Flexbox items.

Question 23

Which CSS property defines the shape of the area that text should wrap around, allowing text to curve around circular images or complex vectors?

Accepted Answer

Correct Answer

Answer

`shape-outside`

Answer

`text-wrap-shape`

Answer

`float-curve`

Answer

`contour`

Question 24

What is FOUC in web development?

Accepted Answer

Correct Answer

Answer

Flash of Unstyled Content: A phenomenon where a webpage briefly appears with browser-default styling before the external CSS finishes loading.

Answer

Frame Optimization Under Constraints: A GPU rendering metric.

Answer

Format Object Under CSS: A method of scoping styles.

Answer

First Output Update Cycle: A React rendering lifecycle phase.

Question 25

Congratulations on finishing CSS Fundamentals! Why is mastering CSS Specificity, the Box Model, and modern layout systems (Grid/Flex) critical for a React developer?

Accepted Answer

Correct Answer

Answer

Because React relies on CSS to handle API data fetching.

Answer

Because React components are useless if they are unreadable, inaccessible, or broken on mobile devices. A robust UI requires rock-solid CSS architecture, regardless of the JS framework used.

Answer

Because CSS automatically compiles JSX code.

Answer

Because React cannot function without a CSS-in-JS library.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 6)