CSS selectors and specificity
Targeting elements with type, class, id and attribute selectors, pseudo-classes and combinators, then computing the specificity that settles a conflict between two rules.
- 25 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
A few cards from the deck
Class selector: what is it?
Show the answer
A pattern that matches every element whose class attribute contains a given name; it is written with a dot before that name.
.notematches<p class="note">and also<div class="note alert">: an element may carry several classes, and a class may be shared by several elements.What is the specificity of this selector?
```css
nav ul li a:hover`- (0, 1, 4)
- (0, 0, 5)
- (1, 0, 4)
- (0, 4, 1)
Show the answer
(0, 1, 4)
Four element names (nav, ul, li, a) make 4 in the last column; the
:hoverpseudo-class counts as a class, which is 1 in the middle column.In
nav a, the space is the … combinator: it matches anyalocated inside anav, at any depth.Show the answer
In
nav a, the space is the descendant combinator: it matches anyalocated inside anav, at any depth.Only the
>combinator restricts the search to direct children; the space walks the whole lineage.Child combinator: what is it?
Show the answer
The
>symbol between two patterns: it keeps only the elements that are direct children of the first one, not their grandchildren.nav > adoes not reach a link placed inside aulof the bar, whereasnav a(the descendant combinator, a plain space) does.