CSS Selectors: Learn CSS Selector in depth with full details

What is CSS selectors:

CSS Selectors: A CSS selector selects the content that you want to style actually CSS selector is the part of a CSS rule set.

With a brief description of each Let’s look at all the different kinds of selectors available.

Universal selector in CSS:

For selecting all elements on a page using the universal selector it works like a wild card character. Every HTML page is built on content placed within the HTML tags. Each set of tags are representing an element on the web page. The uses of universal selector let’s look at the following CSS example:

* {
   margin: 0px;
   padding: 0px;
   font-size: 1em;
   line-height: 1em;
}

The four lines of code inside the curly braces (margin, padding,font-size, and line-height) will apply to all elements on the HTML page. The universal selector is declared using an asterisk as seen here. In combination with the other selectors, we can also use the universal selector.

Element Type Selector in CSS:

In the document tree with the corresponding element type name the element type selector matches every instance of the elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>element type selector</title>
<style>
h1 {
color: gray;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>This is heading one</h1>
<p>This is paragraph one.</p>
</body>
</html> }

Output:

css element type selector

The style rules inside the p selector will be applied on each <p> element within the document and color it blue, regardless of their position within the document tree.

CSS ID Selector:

An ID selector is declared using a pound, or hash symbol (#) preceding a string of characters. By the developer, the string of characters is defined. ID selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.

Here is an example blew:

#myId{
   width: 900px;
   margin: 0 auto;
}

This CSS uses an ID selector to match the HTML element such as:

<div id="myId"></div>

In this situation, the fact that this is a <div> element doesn’t matter—it can be any kind of HTML element. As long as it has an ID attribute with a value of ‘myId’, the styles will apply.

An ID element on a web page always should be unique. That is, there should only be a single element on any given web page with an ID of myId. This makes the ID selector quite inflexible because the styles used inside the ID selector rule set may be used only once per page.

The styles will still apply if there happens to be more than one element on the page with the same ID, but the HTML on such a page would be invalid from a technical standpoint, so you will want to avoid doing this.

ID selectors also have the problem of very high specificity, in addition to the problems of inflexibility.

CSS Class Selectors:

With the help of CSS class selectors, we can be used to select any HTML element that has a class attribute. All HTML elements having that class will be formatted according to the defined rule.

CSS class selector is defined with a period sign (.) immediately followed by the class value.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS class selector</title>
<style> 
.red {
color: #CF4F46;
}
</style>
</head>
<body>
<h1 class="red">This is heading one</h1>
<p class="red">This is paragraph one.</p>
<p>This paragraph two.</p>
</body>
</html>

Output:

CSS Class Selectors

The above style rules render the text in red of every element in the document that has class attribute set to red. We can make it a bit more particular. For example:

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS class selector</title>
<style> 
p.blue {
color: #4267B2;
}
</style>
</head>
<body>
<h1 class="blue">This is heading one</h1>
<p class="blue">This is paragraph one.</p>
<p>This paragraph two.</p>
</body>
</html>

Output:

css class selectors

The style rule inside the selector p.blue renders the text in blue of only those <p> elements that have class attribute set to blue, and has no effect on other paragraphs.


Descendant selectors in CSS:

When you need to select an element that is the descendant of another element then You can use these selectors. For example, if we want to target only those anchors that are contained within an unordered list, rather than targeting all the anchor elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Descendant Selectors</title>
<style>
	h1 em {
		color: gray;
	}
    ul.menu {
        padding: 0;
        list-style: none;
	}
    ul.menu li{
        display: inline;
	}
	ul.menu li a {
		margin: 8px;
		text-decoration: none;
	}
</style>
</head>
<body>
	<h1>This is a <em>heading one</em></h1>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About US</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</body>
</html>

Output:

CSS Descendant Selectors

The style rules within the selector ul.menu li a applied to only those <a> i.e. anchor elements that contained inside an unordered list having the class .menu, and has no impact on other links inside the document. Similarly, the style rules inside the h1 em selector applied to only <em> elements that contained inside the heading <h1>.


CSS selectors child:

The direct children of some element that can be select with the help of CSS child selector. The CSS child selector is made up of two or more selectors separated by the greater than symbol (i.e. >). We can use these selectors, to select the first level of list elements inside a nested list that has more than one level.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Child Selectors</title>
<style>
ul > li {
list-style: square;

}
ul > li ol {
list-style: none;
}

</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li> 
<li>
<a href="#">Services</a>
<ol>
<li><a href="#">Windows</a></li>
<li><a href="#">Android</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

The style rule inside the selector ul > li applied to only those <li> elements that are a direct child of the <ul> elements, and has no impact on other list elements.

Output:

CSS Child Selectors


CSS Adjacent Sibling Selectors:

We can select sibling elements with the help of the adjacent sibling selectors. The adjacent sibling selector has the syntax like E1 + E2, where E2 is the target of the selector.

The selector h1 + p in the example below will select the <p> elements only if both the <h2> and <p> elements share the same parent in the document tree and <h2> is immediately precedes the <p>  element. That means only those paragraphs that are come immediately after each <h2> heading will have the associated with style rules.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Adjacent Sibling Selectors</title>
<style>
	h2 + p {
		color: #1EBBA3;
		font-size: 18px;
	}
	ul.task + p {
		color: #06BEFF;
		text-indent: 30px;
	}
</style>
</head>
<body>
	<h2>This is heading one</h2>
	<p>This is paragraph one.</p>
	<p>This is paragraph two.</p>
	<ul class="task">
		<li>Task one</li>
		<li>Task two</li>
		<li>Task three</li>
	</ul>
	<p>This is paragraph one.</p>
	<p>This is paragraph two.</p>
</body>
</html>

Output:

 

CSS Adjacent Sibling Selectors

CSS General Sibling Selectors:

The CSS general sibling selector is similar to the adjacent sibling selector (C1 + C2), but it is less strict. it’s made up of two simple selectors separated by the tilde () character. It actually like C1 ∼ C2, where C2 is the target of the selector.

The selector h2 ∼ p in the example below will select all the <p> elements that preceded by the <h2> element, where all the elements share the same parent inside the document tree.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS General Sibling Selectors</title>
<style>
	h2 ~ p {
		color: #1EBBA3;
		font-size: 1em;
	}
	ul.task1 ~ p {
		color: #317DB3;
		text-indent: 2em;
	}
</style>
</head>
<body>
	<h2>This is Heading two</h2>
	<p>This is paragraph one.</p>
	<p>This is paragraph two.</p>
	<ul class="task1">
		<li>Task one</li>
		<li>Task two</li>
		<li>Task three</li>
	</ul>
	<p>This is paragraph three.</p>
	<p>This is paragraph four.</p>
</body>
</html>

Output:

CSS General Sibling Selectors


CSS Grouping Selectors:

Often several selectors in a style sheet use the same style rules declarations. We can group them into a comma-separated list to minimize the code in our style sheet. It also prevents us from repeating the same style rules over and over again.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Selectors without Grouping</title>
<style>
	h1 {
		font-size: 32px;
		font-weight: normal;
	}
	h2 {
		font-size: 25px;
		font-weight: normal;
	}
	h3 {
		font-size: 20px;
		font-weight: normal;
	}
</style>
</head>
<body>
	<h1>This is heading one </h1>
        <h2>This is heading two</h2>
        <h3>This is heading three</h3>
</body>
</html>                            

Output:


As we can see in the above example, the same style rule font-weight: normal; is shared by the selectors h1h2 and h3. So, it can be grouped in a comma-separated list, like this:

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Selectors Grouping</title>
<style>
	h1, h2, h3 {
		font-weight: normal;
	}
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 25px;
	}
	h3 {
		font-size: 20px;
	}
</style>
</head>
<body>
	<h1>This is heading one </h1>
        <h2>This is heading two</h2>
        <h3>This is heading three</h3>
</body>
</html>

Output:

Close