Please note, this is a STATIC archive of website www.w3resource.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
w3resource

CSS descendant selectors

 

Type Selectors

CSS type selectors select every instance of an element in an HTML page.

Syntax:

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

Simple Example of CSS type selectors

CSS code:

h1 {
color: blue; /* color of all the elements should be blue */
} 
p {
background-color: aliceblue;
color: maroon;
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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 type selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-type-selector.css' type='text/css'>
</head>
<body>
<h1>Example of CSS type selector.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Aenean tempus adipiscing porttitor. Quisque aliquam nunc vel arcu varius aliquam.</p>
</body>
</html>

Result:

Example of CSS type selector.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.

Aenean tempus adipiscing porttitor. Quisque aliquam nunc vel arcu varius aliquam.

 

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

Advanced Example of CSS type selectors

CSS code:

*{color:blue;}  /* sets color blue  */
em {color: red}   /* sets color red for em */

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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 type selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-type-selector.css' type='text/css'>
</head>
<body>
<p>Lorem ipsum dolor <em>sit amet</em>, consectetur adipiscing elit. Donec a urna elit. <em>Integer</em> malesuada tempus enim nec rhoncus.</p>
</body>
</html>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.

 

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

Previous: CSS type selectors
Next: CSS child selectors