CSS selectors are used to style an element. We need to select an element that we want to style. This is where CSS selectors comes into play.

CSS Selectors can be divided into:

BASIC SELECTORS : Elements that are based on name, id, class can be considered under this category.

UNIVERSAL SELECTOR : Universal Selector can be used to select the whole page. (*) Asterisk is the symbol that we use as a Universal Selector. Here’s the code for your reference:

* {
   margin: 0;
   padding: 0;
}

ELEMENT SELECTOR : Element Selector selects the element based on the element’s name. Here’s the code for your reference:

p {
  text-align: center;
  background-color: red;
}

ID SELECTOR : ID Selector uses the id attribute to select the specific element. ID of an element is unique throughout the page. To select an element with a specific id, write a hash (#) character, followed by the id of the element. Here’s the code for your reference:

#selector{
    color: black;
    background-color: yellow;
    font-family: “Poppins”;
}

CLASS SELECTOR : Class Selector selects all elements that have given the class the class value in their class attribute. It is the most used selector throughout CSS. Here’s the code for your reference:

.container {
  text-align: center;
  color: yellow;
}

Now, all the elements with the class=”container” will be yellow and center-alligned.

GROUPING SELECTORS If we want to design multiple elements with same design than we can use grouping selectors. It’s better because it minimizes the code. To group selectors, separate them with comma (,). Here’s the code for your reference:

h1, h4, p {
  background-color: yellow;
  text-align: center;
  color: black;
}

COMBINATOR SELECTORS : It defines the relationship between selectors.

Descendent Selector: It matches all the elements that are descendent of a specified element. Here’s the code for your reference:

div p h2{
      text-align: center;
      color: black;
}

General Sibling Selector (~): It selects all the elements that are next siblings of the specified element. (~) is used as General Sibling Selector. Here’s the code for your reference:

div ~ p {
      text-align: right;
       color: black;
}

Child Selector (>): It selects all elements that are the children of a specified element. (>) is used as a child selector. Here’s the code for your reference:

div > p {
    color: black;
    background-color: yellow;
    font-family: “Poppins”;
}

Adjacent Sibling Selector(+): As the name suggests, it selects the immediate sibling of the specified element. (+) is used as a child selector. Here’s the code for your reference:

div + p {
    color: black;
    background-color: yellow;
    font-family: “Poppins”;
}

PSEUDO CLASS SELECTORS : It is used to define state of an element.

Anchor pseudo class: Here’s the code for your reference:

/*Unvisited Link*/
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

:hover pseudo class selector : It will change the color of an element when hovered over. Here’s the coder your reference:

div :hover {
  background-color: blue;
}

:first-child pseudo class selector : It matches a specified element that is the first child of the any element. Here’s the code for your reference:

p :first-child{
  color: blue;
}

:last-child pseudo class selector : It matches every specified element that is the last child of the parent. Here’s the code for your reference:

p:last-child{
   color:black;
}

PSEUDO ELEMENT SELECTOR : A CSS Pseudo Element Selector is used to style the specified part of an element. Like, you can style the first line, letter or a word. We can insert content like an image or something that you want after and before the element.

::first-line pseudo element: The ::first-line pseudo-element is used to style to the first line of a text. Many properties can be applied to this pseudo element. Here’s the code for your reference:

p::first-line {
  color: red;
  font-variant: small-caps;
}

::first-letter pseudo element: It is used to style to the first line of a text. Here’s the code for your reference:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::before pseudo element : It is to put content before the specified element. Here’s the code for your reference:

h1::before {
  content: url(pic.png);
}

::after PSEUDO ELEMENT: It is to put content after the specified element. Here’s the code for your reference:

h1::after {
  content: url(cat.png);
}

::marker pseudo element : It is used to select the markers of the list items. Here’s the code for your reference:

::marker {
  color: red;
  font-size: 23px;
}

::selection pseudo element: It styles the portion of an element that is selected by the user. Here’s the code for your reference:

::selection{
    color:red;
    background-color: yellow;
}

Note : Don't just read, go and write some code. Happy Coding!