Common CSS Selectors

Universal selector

A universal selector is a type selector which is used to target all elements in a document.

Type selector/individual selector

it selects all elements of the given type within a document. Even if the component is used multiple times in multiple areas, it will select all the elements of the given type. For example, if the p element is selected, all the p elements in the document get targeted.

Class and Id selector

Class selector matches the element based on the value of their class attribute. All elements with a particular same class group get selected. multiple elements can have the same class. So while styling, all elements of the class group can be targeted at once.

Id selectors are the same as class selectors except that instead of having a group of elements entitled with the same class name, in the case of an Id selector, every element will have a unique id. No 2 elements will have the same id. Even though it does not restrict you from using that way, it is advised to use id uniquely

Selector List/Combined Selector

When multiple elements share the same styling declaration, they can be grouped into the comma-separated list, and apply the styling. These grouping can be done in single-line and multi-line lists. grouping elements that share the same declaration makes reducing the size of the style sheet.

Descendand Combinators / Inside element selector

Descendant combinators are typically represented with two selectors separated by a single space (" ").Such that, the element matched by the second selector is selected if the element's ancestor elements match the first selector of the combinator. more chain of selectors can be used in a similar manner to target the inner elements in a document.

Child Combinator / Direct Child

Child Combinators are denoted by > between the selectors, It selects only those elements which are matched by the second selector which is a direct child of the element matched by the first selector, More than two selectors can be used in the same manner separated by > for targeting the direct children of parent elements.

Adjacent Sibling Combinators

The adjacent sibling combinator is represented by + between the selector, which is used to target the element which is matched by the second selector, only if it immediately follows the first selector. And both selectors will have the same parent element.

AND selector

And selectors are used to target elements that need to be matched with more than one attribute. if the element is entitled to more than one class value, Then those elements can be precisely targeted by matching both class values.

pseudo-elements

pseudo-element is a keyword added to a selector that will allow the styling of a particular part of the selected element. pseudo-elements are denoted with double colons(::) differentiating them from the single colon representation of pseudo-class. Only one pseudo-element can be used in a selector

::before

":: before" creates a pseudo-element before the selected element. It is used to add cosmetic content to the element. It adds content before the element that is specified by the content attribute. It is an inline property by default.

::after

":: after" creates a pseudo-element after the selected element. It is the same as:: before except that it adds content after the element that is specified in the content attribute. It is an inline property by default