CSS Selector

A CSS selector is a pattern to match the elements on a web page. The style rules associated with that selector will be applied to the elements that match the selector pattern.

These are one of the most important aspects of CSS as they allow us to target specific elements on your web page in various ways so that they can be styled.


Universal Selector

The universal selector, denoted by an asterisk (*), matches every single element on the page.

The universal selector may be omitted if other conditions exist on that element. This selector is often used to remove the default margins and paddings from the elements and henceforth, applying our own margin and padding.

*{
	  margin: 0 auto;
	  padding: 0;
}  

Note:- It is recommended not to use the universal selector (*) too often in a production environment, since this selector matches every element on a web page that puts too much of unnecessary pressure on the browsers. We should use element type or class selector instead


Element Type Selector

An element type selector matches all instance of the element in the document with the corresponding element type name.

p{
	  color: #333333;
}  

In the above example, element type, p is targeted and color value is assigned to it. The style rules inside the paragraph p selector will be applied on every <p> element (or paragraph) in the document and make it black(#333333), regardless of their position in the document tree.


Id Selector

This selector is used to define style rules for a single or unique element.

The id selector is defined with a hash sign (#) immediately followed by the id value.

#paragraph{
	  color: #333333;
}

This style rule renders the text of an element in black #333, whose id attribute is set to error.

Note:- The value of an id attribute must be unique within a given document — meaning no two elements in your HTML document can share the same id value. If they share same id, duplicacy will occur.


Class Selector

These selector can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule. We can have multiple elements with same class name.

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

.paragraph{
	  color: #333333;
} 

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

p.paragraph{
	  color: #333333;
}  

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


Descendant Selector

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

p strong {
	  color: #cccccc;
} 
p a {
	text-decoration: none;
} 

The style rules inside the selector(p a) applied to only those <a> elements that contained inside an <p> element, and has no effect on other links inside the document.

Similarly, the style rules inside the p strong selector will be applied to only those <strong> elements that contained inside the <p> element and has not effect on other <strong> elements.


Child Selector

This selector is used to select only those elements that are the direct children of any element.

A child selector is made up of two or more selectors separated by a greater than symbol (>). We can use this selector, for instance, to select the first level of list elements inside a nested list that has more than one level.

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

The style rule inside the selector ol > li applied to only those <li> elements that are direct children of the <ol> elements and has no effect on other list elements.


Adjacent Sibling Selector

This sibling selectors can be used to select sibling elements (i.e. elements at the same level). This selector has the syntax like: E1 + E2, where E1 is primary element and E2 is next to primary selector.

p + h6{
	  color: #cccccc;
} 
p.paragraph + h6 {
	color: #999999;
} 

The selector p + h6 will select the <h6> elements only if both the <p> and <h6> elements share the same parent in the document tree and <p> is immediately precedes the <h6> element. That means only those paragraphs that come immediately after each <p> will have the associated style rules. The selector p.paragraph + h6 will select all the <p> tag with class ‘paragraph’ with h6 element adjacent to it. The color #999999 is applied to these elements


General Sibling Selector

This selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (∼) character.

It can be written like: E1 ∼ E2, where E2 is the target of the selector.

p ~ h6{
	  color: #cccccc;
} 

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


Grouping Selector

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

p, h1, h6{
	  color: #cccccc;
} 

Here, we are grouping elements which share the same styling like p, h1 and h6. All three of them share same property of color i.e we have given styling to all of them by making it comma separated.