Universal Selector (CSS Selector)
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 {
⋮ <span>declarations
</span>}
.warning {
⋮ <span>declarations
</span>}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
)
- “emphasize” in the p element (* matches the
)
- “not” in the first li element (* matches the
- or the
- )
- “type” in the second li element (* matches the
- or the
- )
However, it won’t match the immediate element, since that’s an immediate child of the div element—there’s nothing between
and for the * to match.Example
This rule set will be applied to every element in a document:
* { margin: 0; padding: 0; }Copy after loginFrequently Asked Questions about Universal Selector in CSS
What is the difference between the universal selector and other selectors in CSS?
The universal selector in CSS is represented by an asterisk (*) and it matches any element in the document. This is different from other selectors like class selectors, id selectors, or element selectors that only match specific elements based on their class, id, or element type. The universal selector is a powerful tool but should be used sparingly as it can lead to unexpected results if not used carefully.
Can the universal selector be combined with other selectors?
Yes, the universal selector can be combined with other selectors to create more specific rules. For example, you can combine the universal selector with a class selector to apply a style to all elements with a specific class.
What is the specificity of the universal selector?
The universal selector has the lowest specificity in CSS. This means that if there are conflicting styles, the style defined by the universal selector will be overridden by styles defined by other selectors.
Does the universal selector affect performance?
While the universal selector can affect performance, the impact is usually negligible on modern browsers. However, it’s still a good practice to use more specific selectors whenever possible to reduce the amount of work the browser has to do.
Can the universal selector be used in media queries?
Yes, the universal selector can be used in media queries. This can be useful for applying styles to all elements on the page under certain conditions, such as when the viewport is a certain width.
How does the universal selector interact with inheritance in CSS?
The universal selector can override inherited styles. However, because it has the lowest specificity, it can be overridden by other selectors.
Can the universal selector target pseudo-elements and pseudo-classes?
Yes, the universal selector can target pseudo-elements and pseudo-classes. However, it’s generally better to use more specific selectors for these cases.
What are some common use cases for the universal selector?
The universal selector is often used for resetting styles, such as removing default margins and padding from all elements. It can also be used to apply a style to all elements on the page, such as setting a default font or color.
Are there any drawbacks to using the universal selector?
While the universal selector is a powerful tool, it should be used sparingly. Overuse can lead to unexpected results and can make your CSS harder to maintain. It can also potentially impact performance, although this is usually negligible on modern browsers.
How does the universal selector work in different browsers?
The universal selector is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, there may be slight differences in how it is implemented, so it’s always a good idea to test your CSS in multiple browsers.
The above is the detailed content of Universal Selector (CSS Selector). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
How do you use CSS to create text effects, such as text shadows and gradients?
Mar 14, 2025 am 11:10 AM
The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
