Universal Selector (CSS Selector)
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
Description
The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector. The two selector examples shown here are equivalent:
*.warning {
⋮ declarations
}
.warning {
⋮ declarations
}
It’s important not to confuse the universal selector with a wildcard character—the universal selector doesn’t match “zero or more elements.” Consider the following HTML fragment:
<body> <div> <h1>The <em>Universal</em> Selector</h1> <p>We must <em>emphasize</em> the following:</p> <ul> <li>It's <em>not</em> a wildcard.</li> <li>It matches elements regardless of <em>type</em>.</li> </ul> This is an <em>immediate</em> child of the division. </div> </body>
The selector div * em
will match the following em
elements:
- “Universal” in the
h1
element (*
matches the<h1>
) - “emphasize” in the
p
element (*
matches the<p>
) - “not” in the first
li
element (*
matches the<ul>
or the<li>
) - “type” in the second
li
element (*
matches the<ul>
or the<li>
)
However, it won’t match the <em>immediate</em>
element, since that’s an immediate child of the div
element—there’s nothing between <div>
and <em>
for the *
to match.
Example
This rule set will be applied to every element in a document:
* {
margin: 0;
padding: 0;
}
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




