Universal-Selector
Universal Selector
- The universal selector is used to select all the elements on the pages.
- asterisk * and is used to target all elements on a webpage.
- It applies styles to every element, regardless of its type, class, ID, or other attributes.
Syntax:
* {
/* CSS properties and values */
}
Key Points:
- The universal selector has low specificity, meaning other more specific selectors can override its styles.
- Applying styles to all elements can impact performance, so use it judiciously and avoid excessive use.
Example:
* {
margin: 0;
padding: 0;
border: none;
}
- In the above example, the universal selector is used to remove margins, padding, and borders from all elements on the page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This will be applied on every paragraph.</p>
<p id="para1">Welcome to!</p>
<p>Quipoin!</p>
</body>
</html>
Output:
This is heading
This will be applied on every paragraph.
Welcome to!
Quipoin!