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;
}