Simple selectors

There are two kinds of simple selectors. One is a universal selector or * and the other one is a type selector.

The universal selector replaces any single element in the document tree; if it used with another selector, i.e. attribute, then it is as valid as omitted.

A type selector refers to an instance of the element type in a document; for example an element <p> can be referred via a type selector written simply as p in which case every paragraph in that document will have same properties.

Example

CSS simple selectors:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
body {
	padding: 10px;
	margin: 10px auto;
	width: 70%;
	border-top : 2px groove #eee; border-left : 2px groove #eee;
}
div * {
	font: 0.9em Georgia;
}
p {	
	font: italic 0.9em Arial;
	color: #222;
}
</style>
</head>
<body>

<div>Element's body is styled in a way that explains a typical box model in CSS.<br />Further:</div> 
<div>
	<h4>Universal selector has styles applied to all child elements of &lt;div&gt; box to "font: 1.0em Georgia"</h4>
	<p>p1: Paragraphs have altered style:</p>
	<p>p2: "{ font: italic 0.9em Arial; }"</p>
	<p>p3: "{ color: #222; }"</p>
</div>

</body>
</html>

›› go to examples ››

Example

CSS simple selectors:

Comments

About

Contact

Get Connected