CSS Selectors

CSS controls the design, structure, and display of HTML elements using selectors.

The way that HTML elements appear on screens, in print, and in other media is defined by CSS.

So what are selectors?

Selectors for CSS are specific patterns of HTML attributes such as ‘id’, ‘class’, or a name of an HTML tag.

An example of how CSS uses selectors to access an element and style it.

<div class="box"> 
	<p>Dinosaurs were destroyed by a <span>joint asteroid</span> the size of a mountain.</p>
</div>

<div id="special-box"> 
	<p>There is an <span>elephant</span> in the room.</p>
	<p>Amazon jungle has many <span>colourful</span> birds.</p>
</div>

Example Explained:

In the above example, the first element uses the class selector ‘box’ to style `div ` and other elements inside. The second element uses a ‘special-box’ ID to style `div` and all elements inside it.

Just for understanding, I will categorize CSS styling in “Simple selectors” and “Complex selectors” two different groups.

Simple selectors

In a simple selection method, we use class selectors, id-selectors or tag name to style elements. This is how we can write a CSS style for the above HTML elements with class and ID attributes.

A complete example with CSS styling:

<!DOCTYPE html>
<html>
	<head>
		<style>
			/* styling element with tag selector method */
			h1{
				color: skyblue;
			}
			
			/* styling div tag with class box selector */
			.box{
				border: 1px solid purple;
				padding: 4px;
			}
			
			/* styling div tag using special-box id selector */
			#special-box{
				border: 1px solid gray;
				padding: 4px;				
			}
		</style>
	</head>
	<body>
		<h1>CSS selectors, to access and style elements.</h1>
		<div class="box"> 
			<p>Dinosaurs were destroyed by a <span>joint asteroid</span> the size of a mountain.</p>
		</div>

		<div id="special-box"> 
			<p>There is an <span>elephant</span> in the room.</p>
			<p>Amazon jungle has many <span>colourful</span> birds.</p>
		</div>
	</body>
</html>

Example Output

Try Online

CSS uses ‘#’ to access and style the id-selector and uses the ‘.’ dot to select class selectors.

Note: There can only be one ID selector per HTML whole page. Class selectors can be used multiple times on a single page.

Group selectors

There are situations where you want to keep the same style for a group of elements and items, e.g. you want to keep the same color or font-family for some elements.

To select several HTML elements and apply the same style to them, you can use CSS Group selectors. When you want to apply the same style to several items without having to repeat the code, this is helpful. You can use commas to separate each selector when using CSS Group selectors.
Here’s an illustration:

h1, h2, h3 {
  color: blue;
  font-family: "Trebuchet MS", Verdana, Arial, serif;
}

h1{
	font-size: 24px;
}

h2{
	font-size: 20px;
}

h3{
	font-size: 16px;
}

In the above example, the first syntax changes the colour and font-family of all three elements using group syntax.
All other three syntax assign different font sizes to elements.

Complex Selectors

In the complex selection method, CSS uses more complex syntax methods to access, isolate, and focus on an element.
Here are a few examples of complex selection methods.

Child Selector (>):

Using the > symbol CSS style direct children of a specific element.

Example:

<style>
 ul > li {
   color: green;
}
</style>  
<ul>
	<li>List 1</li>
	<li>List 2</li>
	<li>
		<ol>
			<li>Child List 1</li>
			<li>Child List 2</li>
			<li>Child List 3</li>
		</ol>
	</li>
	<li>List 3</li>
</ul>