💡 Part 5: 30 Advanced CSS Interview Questions & Answers

Welcome to Part 5 of our frontend interview series. In this article, we’ll cover 30 advanced CSS questions that are commonly asked in real interviews. These questions go beyond the basics — focusing on deep concepts like rendering, performance, custom properties, stacking contexts, advanced selectors, and modern techniques used by senior developers.

---

1. ❓ What is a stacking context in CSS?

Answer:
A stacking context is an element that contains a set of layers, with a specific z-index hierarchy. It helps manage which elements appear on top of each other.

A new stacking context is created when:

• A z-index is applied to a positioned element.

• An element has opacity less than 1.

• An element has transform, filter, will-change, or perspective.

Example:

.parent {
  position: relative;
  z-index: 1;
  opacity: 0.9; /* creates new stacking context */
}

---

2. ❓ What is the difference between z-index and stacking context?

Answer:

• z-index only works within the same stacking context.

• A new stacking context isolates z-index values inside it.

So, even if an element has a higher z-index, it can be behind another stacking context with lower z-index but higher in the tree.

---

3. ❓ How do CSS variables (custom properties) work?

Answer:
CSS variables start with -- and can be reused throughout the CSS. They're scoped to the element they are defined in and cascade like normal properties.

:root {
  --main-color: #f62718;
}
button {
  color: var(--main-color);
}

---

4. ❓ How are CSS variables different from SASS/LESS variables?

Answer:

CSS variables are dynamic and part of the runtime, unlike preprocessor variables.

---

5. ❓ What are attribute selectors in CSS?

Answer:
Attribute selectors match HTML elements based on attributes and their values.

Examples:

input[type="text"] { }   /* Exact match */
a[href^="https://"] { }  /* Starts with */
a[href$=".pdf"] { }      /* Ends with */

---

6. ❓ What is the :not() pseudo-class?

Answer:
It selects every element that does not match the given selector.

button:not(.primary) {
  background: gray;
}

This improves code efficiency by avoiding extra classes or JS logic.

---

7. ❓ What is specificity in CSS?

Answer:
Specificity determines which rule wins when multiple rules match the same element. It's calculated as:

• Inline styles (1000)

• ID selectors (100)

• Class/selectors/pseudo-classes (10)

• Element selectors (1)

---

8. ❓ How to calculate the specificity of this selector: #header .nav li a?

Answer:

• #header → 100

• .nav → 10

• li → 1

• a → 1
  Total = 112

---

9. ❓ How can you override !important?

Answer:
You can override an !important rule by writing another rule with:

• The same property

• Higher specificity

• Also using !important

---

10. ❓ What is the use of the :is() pseudo-class?

Answer:
:is() simplifies complex selectors and reduces repetition.

:is(h1, h2, h3) {
  font-weight: bold;
}

---

11. ❓ What are pseudo-elements? Give examples.

Answer:
Pseudo-elements style specific parts of elements.

Examples:

p::first-line { }
p::before { content: "👉 "; }

---

12. ❓ Difference between pseudo-class and pseudo-element?

Answer:

---

13. ❓ What is contain property in CSS?

Answer:
The contain property improves performance by letting browsers skip layout, paint, or size calculations for isolated sections.

.card {
  contain: layout paint;
}

---

14. ❓ What is BEM in CSS?

Answer:
BEM = Block Element Modifier

It’s a naming convention for writing clean and reusable CSS.

<div class="card card--active">
  <div class="card__title">Title</div>
</div>

---

15. ❓ What is the difference between visibility: hidden and display: none?

Answer:

• visibility: hidden hides the element but keeps its space.

• display: none removes it completely from the layout.

---

16. ❓ Explain the box model in CSS.

Answer:
Each element is a box with:

• Content

• Padding

• Border

• Margin

Understanding it helps with spacing and layout issues.

---

17. ❓ How does box-sizing affect layout?

Answer:
box-sizing: border-box includes padding and border in the total width/height, making layouts easier to manage.

---

18. ❓ What is the default position value in CSS?

Answer:
position: static is the default, meaning the element flows normally in the document layout.

---

19. ❓ What’s the difference between relative and absolute positioning?

Answer:

• relative: positions relative to itself.

• absolute: positions relative to the nearest positioned ancestor.

---

20. ❓ What is a media query?

Answer:
Media queries are used to apply styles conditionally based on screen size, resolution, etc.

@media (max-width: 600px) {
  body { font-size: 14px; }
}

---

21. ❓ How do rem and em units differ?

Answer:

• em: relative to parent element

• rem: relative to root (html)

---

22. ❓ What is the difference between min-width and max-width?

Answer:

• min-width: applies style when screen is larger than value

• max-width: applies style when screen is smaller than value

---

23. ❓ How to optimize CSS performance?

Answer:

• Use fewer selectors and combine rules.

• Avoid deeply nested selectors.

• Minify and compress CSS.

• Use CSS containment.

• Remove unused styles.

---

24. ❓ How to make animations smooth?

Answer:

• Use transform and opacity instead of top, left.

• Use will-change to hint the browser.

.card {
  will-change: transform;
}

---

25. ❓ What is the clip-path property?

Answer:
It creates complex shapes like circles, polygons by clipping elements.

clip-path: circle(50%);

---

26. ❓ What is object-fit in CSS?

Answer:
It defines how images/videos fit inside containers.

img {
  object-fit: cover;
}

---

27. ❓ What is the difference between auto and 0 in margins?

Answer:

• margin: auto centers block elements.

• margin: 0 removes all margin.

---

28. ❓ Can pseudo-elements be animated?

Answer:
Yes. Use ::before or ::after with transitions/animations.

---

29. ❓ How does CSS handle dark mode?

Answer:
Use media query:

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #fff;
  }
}

---

30. ❓ What is the difference between currentColor and inherit?

Answer:

• currentColor: uses the value of the element’s color property.

• inherit: uses the parent’s value for any property.

---

🔚 Conclusion:

These advanced CSS questions are commonly asked in real-world interviews, especially for senior frontend roles. Make sure you not only memorize answers but also experiment with code and observe the results in real projects.