Element and Universal Selectors
The café wants every paragraph on the site in the same comfortable font, and every heading level 2 in the brand's navy. You do not need to label anything for that. The element's own name is already a selector.
The rule
A bare tag name styles every element of that kind, everywhere.
An element selector (also called a type selector) is just the tag name:
p {
line-height: 1.6;
}
h2 {
color: navy;
}Every example uses the Harbour Café page from the first lesson of the course: a header with an h1 and a nav of two links, a section#menu holding an h2 and two article.dish cards (the second is also .special), each with an h3, a p.price and a description p, then a section#visit with an h2 and one p, and a footer with one p.
p matches all six paragraphs: two prices, two descriptions, the opening hours and the footer line. h2 matches both section headings, "Today's menu" and "Visit us". It does not touch the h1 or the h3s; those are different element types.
The universal selector, *, matches every element of any type:
* {
margin: 0;
box-sizing: border-box;
}That rule removes the browser's default margins from everything, a common first line of a stylesheet, often called a reset.
Both selectors are weak in the cascade. An element selector scores (0,0,1). The universal selector scores (0,0,0), nothing at all, so almost any other rule beats it. That weakness is a feature: these are the broad defaults that more specific rules then refine.
The shortcut
Think in layers: * for resets, element selectors for site-wide defaults, classes for anything that differs. When you write an element selector, picture every matching element on every page, not just the one you are looking at.
The request
"Make the description text grey."
Drills
Answer fast — trust the rule.
How many elements on the café page does p match?
Which selector styles both section headings but not the café's name or the dish names?
A stylesheet has p { color: black; } and later * { color: gray; }. What colour are the paragraphs?
What is the specificity of *?
Remember
- A tag name selects every element of that type;
*selects everything. - Layers:
*for resets, elements for defaults, classes for differences. *has zero specificity, andpreally does mean every paragraph.