CSS selectors
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