What are selectors ?

• Selectors are pattern which is used to style the elements in the HTML document. The selectors in CSS are used to target HTML elements which we want to style. There are variety of CSS selectors available to style HTML elements. Let's understand about some important selectors in CSS.

Type Selector(Individual selector)

• It selects and targets an individual element of the given type within a document. This selector can be used when we want to style an individual element in the HTML document .The syntax of this selector can be written as follows.

  element { style properties }
  

  [codepen]

Universal Selector

• This selector is used to select all type element in a HTML document. This selector can be used when we want to style all element inside the HTML document. The syntax of the universal selector is given below.

  *{style properties}
  

  [codepen]

Class selector

• The class selector target every element in HTML document to which the class is applied. For example if a class 'first' is applied to <p> tag and <h1> tag i.e <p class='first'>tag and <h1 class='first'> than we can style <h1> and <p> tag using class selector. The class selector starts with ( . ) dot character and than the class name is written. The syntax of the class selector is as follows.

  .class name{style properties}
  

  [Codepen]

ID selector

• The ID selector targets the element in the HTML document to which the ID is applied. The id starts with the sign ( # ) followed by the name of the id. For example if ID 'first' is applied to <p>tag i.e <p id = 'first'> than we can style<p> tag using ID selector. The syntax for targeting an element in the HTML document is given below. Let's understand this with an example given below.

  # id-name{style properties}
  

  [Codepen]

  Difference between Class and ID

• There can be only one ID associated with a single element while there can be multiple classes associated with the single element.
• There can be only one ID with that particular name in the given page while the same class name can be associated with the different element in the given page.

and selector ( chained )

• AND selector is basically chaining the selectors. In this selector no space is given between the selectors to which the styling is applied. In this if the element matches every selector than only styling is applied to that particular element. For example :- if<p> has two classes i.e <p class='first second'></p> than <p> tag will get selected if in the selector only this two classes are written otherwise it will not get selected. -Let's understand this with an example. The syntax can be written below. In this selector the elements which contains both the class (i.e classname1 and classname2) gets selected and style properties are applied to it.

  element.classname1.classname2{style properties}
  

  .classname1.classname2{style properties}
  

  [Codepen]

Combined selector

• The combined selector is used when multiple selectors are styled with same styling properties. Therefore we can combine all this selectors into a single line and apply the same styling properties. For example

  div{background-color : #0000}
  span{background-color : #0000}
  

• We can combine the above two selectors and same styling properties is applied to them and than write them into a single line. Therefore the styling properties is applied to both div and span.

  div,span{background-color : #0000}
  

  [Codepen]

Inside an element

• The inside an element is represented by a single space (" ") character. The inside an element selector combines the selectors such that the element matched by the last selector get selected if previous selectors are matched with the ancestors element. The syntax can be give as below.

  selector selector{style properties}
  

• In the above syntax the element which is matched with the second selector gets selected if the previous element (ancestor element ) matched with the first selector. Let's understand with an example.

[Codepen]

Direct child selector

• The direct child selector selects that element matched by the second selector who is direct child of the element which is matched by the first selector. Let's understand this selector with an example. The syntax can be given as below.

  selector1>selector2{style properties}
  

  [Codepen]

Sibling selector

• The sibling selector combines selector with ( ~ ) or ( + ) sign. If we use ( ~ ) than it selects all the iteration of the second element which are following the first element and if we use ( + ) than it selects the immediate element which is following the first element. Let's understand about it with an example. The syntax for this can be given as below.

  selector1 ~ selector2{style properties} or selector1 + selector2{style properties}
  

  [Codepen]

Pseudo element

• The Pseudo element in CSS allows us to style a specific part of the selected element. It is used to style first line or last line of the content or used to insert some content before or after the selected element. The syntax for this can be written as follows.

  selector :: Pseudo-element{Property :  value}
  

• Let's discuss few pseudo elements

::after pseudo element

• The ::after is used to insert some content after the element which is selected. Technically, we can say that it creates a pseudo element which is the last child of the selected element. The syntax for this can be given as follows.

  selector::after{Property:value}
  

  [Codepen]

::before pseudo element

• The ::before is used to insert some content before the element which is selected. Technically, we can say that it creates a pseudo element which is the first child of the selected element. The syntax for this can be given as follows.

  selector::before{Property:value}
  

  [Codepen]

• This is the end of the article. Hope you enjoyed reading the article. Please comment below for any suggestions to improve the style or content of writing. Stay tuned....!!!!