CSS selectors

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Universal Selector

CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk ( i.e. "*" ) is used to denote a CSS universal selector. An asterisk can also be followed by a selector. This is useful when you want to set a style for of all the elements of an HTML page or for all of the elements within an element of an HTML page.

syntax:

* { CSS-Property: value; ........................ }

Simple Example of CSS universal selectors

CSS code:

* {
color: blue; /* color of all the elements should be blue */
background: silver; /* silver background is set for all the elements */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Example of CSS universal selectors </title>
<link rel='stylesheet' href='simple-example-of-CSS-universal-selectors.css' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h2>
<h2>Example of grouping of CSS universal selectors.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
</html>

Result:

View this simple example of CSS universal selector in a separate browser window.

CSS code:

*[lang=fr]{color:blue;}  /* sets color blue  */

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS universal selectors</title>
<link rel='stylesheet' href='advanced-example-of-CSS-universal-selectors.css' type='text/css'>
</head>
<body>
<p>This paragraph is in english.</p>
<p lang="fr">Ce paragraphe est en français.</p>
</body>
</html>

Result:

This paragraph is in english.

Ce paragraphe est en français.

View this advanced example of CSS universal selector in a separate browser window.

Previous: Grouping of CSS selectors
Next: CSS type selectors