CSS Selectors:

A CSS Selector will not always be a TAG; it can be a CLASS or an ID as well. CSS provides a rich set of different types of selectors.

Following is a list of all:

Universal Selector
Element Selector
Group Selector
Class Selector
ID Selector
Child Selector
Descendant Selector
Adjacent Sibling Selector
General Sibling Selector

Universal Selector:

It is represented by a star (asterisk). When written as a selector, it applies to all the elements in the web page.

<html>
	<head>
		<style>
			*
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<ul>
			<li>India</li>
			<li>England</li>
			<li>Australia</li>
		</ul>
	</body>
</html>

Here in this code, three properties are applied to the universal selector * that enables the style not only on h3, p and ul but on the entire body as well.
Output

Element Selector:

It is represented by any valid HTML tag. When written as a selector, it applies to all instances of that tag in the web page.

<html>
	<head>
		<style>
			p
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<h3>Welcome,</h3>
		<p>What can we do for you?</p>
	</body>
</html>

Here in this code, three properties are applied to the element selector p that enables the style on both the paragraphs leaving the heading unaffected.
Output

Group Selector:

It is represented by using comma between multiple selectors written one after another. When written as a group selector, it applies to all instances of all those tags in the web page.

<html>
	<head>
		<style>
			p,h3
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<ul>
			<li>India</li>
			<li>England</li>
			<li>Australia</li>
		</ul>
	</body>
</html>

Here in this code, three properties are applied to the group of selectors p and h3 that enables the style on both the elements leaving list unaffected.
Output

Class Selector:

It is represented by using dot (.) before the selector. A class is a special attribute given to the HTML elements. When written as a class selector, it applies to all instances of those tags that are having been given the respective class in the web page.

<html>
	<head>
		<style>
			.parastyle1
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<p class="parastyle1">Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
		<p class="parastyle1">Please tell us, what are you looking for?</p>
	</body>
</html>

Here in this code, three properties are applied to the class selector parastyle1 that was given to the first and third paragraphs only. When applied, it enables the style on both the paragraphs leaving the second one unaffected.
Output

ID Selector:

It is represented by using hash (#) before the selector. An ID is a special attribute given to the HTML elements. When written as a ID selector, it applies to the only tag that has been given the respective ID in the web page.

<html>
	<head>
		<style>
			#parastyle1
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
			#parastyle2
			{
				color:green;
				background-color:pink;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<p id="parastyle1">Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
		<p id="parastyle2">Please tell us, what are you looking for?</p>
	</body>
</html>

Here in this code, two sets of three properties are applied to the ID selectors parastyle1 and parastyle2 respectively. When applied, it enables the style #parastyle1 on the first paragraph and #parastyle2 on the third paragraph leaving the second one unaffected.
Output

Child Selector:

It is represented by using chevron (>) between two selectors. It selects an element that is direct child of a parental element. When written as a child selector, it applies to all the elements that are direct child of the parental element in the web page leaving all other similar elements unaffected.

<html>
	<head>
		<style>
			li>p
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<ul>
			<li><p>India</p></li>
			<li><span><p>England</p></span></li>
			<li><p>Australia</p></li>
		</ul>
	</body>
</html>

Here in this code, three properties are applied to the child selector li>p. When applied, it enables the style on first and third paragraphs that are direct children of li, leaving the second one unaffected because it is not the direct child of li.
Output

Descendant Selector:

It is represented by using space ( ) between two selectors. It selects an element that is direct/indirect child of a parental element. When written as a descendant selector, it applies to all the elements that are either direct or indirect children of the parental element in the web page leaving all other similar elements unaffected.

<html>
	<head>
		<style>
			li p
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<ul>
			<li><p>India</p></li>
			<li><span><p>England</p></span></li>
			<li><p>Australia</p></li>
		</ul>
	</body>
</html>

Here in this code, three properties are applied to the descendant selector li p. When applied, it enables the style on all three paragraphs that are children of li irrespective of the fact that the second is not a direct child of li, leaving the general paragraphs unaffected.
Output

Adjacent Sibling Selector:

It is represented by using plus (+) between two selectors. It selects an element that is immediate next sibling of a specified element. When written as a adjacent sibling selector, it applies to the only element that is immediate next sibling of the specified element in the web page leaving all other similar elements unaffected.

<html>
	<head>
		<style>
			h3+p
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, three properties are applied to the adjacent sibling selector h3+p. When applied, it enables the style only on the adjacent next paragraphs that is written next to h3 leaving the other paragraphs unaffected.
Output

General Sibling Selector:

It is represented by using tilde (~) between two selectors. It selects all the elements that are next siblings of a specified element. When written as a general sibling selector, it applies to all the elements that are next siblings of the specified element in the web page leaving all other similar elements unaffected.

<html>
	<head>
		<style>
			h3~p
			{
				color:red;
				background-color:lightgreen;
				text-align:justify;
			}
		</style>
	</head>
	<body>
		<h3>Welcome,</h3>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, three properties are applied to the general sibling selector h3~p. When applied, it enables the style on all of the paragraphs that are written next to h3 leaving the other paragraphs unaffected.
Output