What are CSS selectors?
Patterns used to match (or select) the elements you want to style. They can also be used in JavaScript to select DOM nodes.
What does the universal selector (*) match?
Elements of any type. It does not directly match pseudo-elements by itself.
How do you select an element by its class attribute?
Use a dot (.) followed by the class name, e.g. .spacious { margin: 2em; }
How do you select an element by its ID?
Use a hash (#) followed by the ID value, e.g. #maincontent { border: 1px solid blue; }
How do you chain multiple class selectors on one element?
Write the classes with no whitespace between them, e.g. li.spacious.elegant — this only matches elements that have both classes.
What is a type selector?
A selector that matches elements by their HTML tag name, e.g. h1, p, div.
What is the selector list (comma separator) used for?
Grouping multiple selectors that share the same declarations, e.g. h1, h2, h3 { font-family: sans-serif; }. All matching nodes are selected.
What happens if one selector in a selector list is invalid?
The entire style block is ignored — unless you use :is() or :where(), which accept forgiving selector lists and skip only the invalid selectors.
What is the difference between :is() and :where() regarding specificity?
The specificity of :is() equals its most specific argument, while :where() always has zero specificity (0-0-0).
How do attribute selectors work?
They match elements based on their attributes or attribute values, e.g. [type=”radio”] selects elements with type=”radio”.
How do you make an attribute selector case-insensitive?
Add the i modifier inside the brackets, e.g. [type=”a” i].
What is the descendant combinator?
A space between two selectors, e.g. div p — it selects all <p> elements that are descendants (at any depth) of a <div>.
What is the child combinator?
The > symbol, e.g. div > p — it selects only direct children, not deeper descendants.
What is the adjacent sibling combinator?
The + symbol, e.g. h1 + p — it selects the element immediately following the first element, sharing the same parent.
What is the general sibling combinator?
The ~ symbol, e.g. h1 ~ p — it selects all sibling elements that follow the first element (not just the immediately adjacent one).
What pseudo-class targets an element when a user hovers over it?
:hover — e.g. a:hover { color: red; }
What is the difference between a pseudo-class and a pseudo-element?
A pseudo-class (single colon, e.g. :hover) selects elements in a certain state. A pseudo-element (double colon, e.g. ::before) selects a specific part of an element.
What does the :nth-child() pseudo-class do?
Matches elements based on their position among siblings, using a formula like :nth-child(2n+1) for odd children.
Why should *.warning and .warning be considered equivalent?
The asterisk is optional with simple selectors — both select all elements with class=”warning”.
What does the :not() pseudo-class do?
It matches elements that do NOT match the selector argument, e.g. p:not(.intro) selects paragraphs without the intro class. The selectors inside :not() do contribute to specificity.
