CSS Advanced Selectors — Interview Questions & Answers

Ques: What are CSS Attribute Selectors?

Ans: Attribute selectors style elements based on their attributes or attribute values.

Selector	Description	Example
[attr]	Selects elements with a given attribute	[title] { color: blue; }
[attr="value"]	Matches an exact value	input[type="text"] { color: red; }
[attr~="value"]	Matches a word in a space-separated list	[class~="active"]
[attr^="value"]	Matches value starting with given text	a[href^="https"]
[attr$="value"]	Matches value ending with text	img[src$=".png"]
[attr*="value"]	Matches value containing text	a[href*="login"]

Example:

a[href^="https"] { color: green; }    /* Starts with https */
img[src$=".jpg"] { border: 2px solid red; }  /* Ends with .jpg */

Ques: What are CSS combinators?

Ans: Combinators define relationships between elements — helping target nested or sibling elements.

Combinator	Description	Example
A B	Descendant — B inside A	div p
A > B	Child — Direct child	ul > li
A + B	Adjacent sibling — B immediately after A	h1 + p
A ~ B	General sibling — All B siblings after A	h1 ~ p

Example:

div > p { color: blue; }     /* Direct child */
h1 + p { font-weight: bold; } /* Paragraph right after h1 */

Ques: What are pseudo-classes in CSS?

Ans: Pseudo-classes target elements based on their state, position, or user interaction.

Pseudo-Class	Description	Example
:hover	When mouse is over an element	a:hover { color: red; }
:focus	When an element is focused	input:focus { border-color: blue; }
:active	When clicked	button:active { background: yellow; }
:first-child	First child of parent	li:first-child
:last-child	Last child of parent	li:last-child
:nth-child(n)	Selects specific children	li:nth-child(2)
:checked	Checked form elements	input:checked
:disabled / :enabled	Input state	input:disabled

Example:

button:hover { background: #333; color: white; }
input:focus { outline: 2px solid skyblue; }

Ques: What are pseudo-elements in CSS?

Ans: Pseudo-elements create virtual elements you can style — even though they don’t exist in HTML.

Pseudo-Element	Description	Example
::before	Adds content before an element	p::before { content: "→ "; }
::after	Adds content after an element	p::after { content: " ✓"; }
::first-letter	Styles first letter	p::first-letter { font-size: 2em; }
::first-line	Styles first line	p::first-line { color: blue; }
::selection	Styles selected text	::selection { background: yellow; }

Example:

h1::before { content: "★ "; color: gold; }
p::after { content: " ✨"; }

Ques: What is the difference between pseudo-class and pseudo-element?

Feature	Pseudo-Class	Pseudo-Element
Purpose	Targets state or condition of an element	Targets part of an element
Syntax	: (single colon)	:: (double colon)
Example	a:hover	p::after

Ques: What are advanced selectors introduced in modern CSS?

Ans: Modern CSS (Selectors Level 4) introduced powerful, readable, and performance-friendly selectors:

Selector	Description	Example
:is()	Matches any of multiple selectors	:is(h1, h2, h3) { color: red; }
:where()	Like :is(), but 0 specificity	:where(p, li) { margin: 0; }
:has()	Parent selector — checks if element contains something	article:has(img)
:not()	Excludes elements	p:not(.intro)

Example:

section:has(h2) { border: 1px solid blue; }
:is(h1, h2, h3) { color: darkgreen; }

Ques: What is CSS nesting?

Ans: CSS nesting allows writing selectors inside other selectors, similar to SCSS — making code cleaner.

Example (modern CSS):

.card {
  padding: 10px;

  & h2 {
    color: blue;
  }

  & p {
    font-size: 14px;
  }
}

Ques: What are best practices for using selectors?

• Avoid over-specific selectors (div.container ul li span)
• Use class selectors for reusability
• Prefer semantic HTML and minimal nesting
• Group selectors to reduce repetition
• Use modern selectors (:is(), :where(), :has()) for clean, scalable code

Ques: Real-world usage example of multiple selectors

button.primary:hover,
a.button:hover {
  background: #007bff;
  color: #fff;
  transition: 0.3s;
}