Introduction

As a web developer, there are many times when we face difficulties. In the front-end part, CSS selectors are used to define what elements should be styled and how they should be styled. So let's start one by one to elaborate on all the CSS selectors.

Basic Selectors:

Basic selectors are the most basic of all the selectors. They are used to target the exact element you want to style.

1.Universal Selector:

The universal selector * selects all the elements of the HTML page.

* {
  margin: 0;
}

2.Type Selectors:

The type selector allows you to select all elements of a particular type, such as all 'a' or 'img' elements. >

a {
  color: red;
}

3.Class selectors:

These class selectors are amazing in CSS since they allow you to specify which elements you want to style in the HTML and you can also share styles between multiple elements by giving them the same class.

.class{
  background: #ffa;
}

4. ID selectors:

The id selector allows you to select an element using its id name. ID attributes are specific to one element only.

#id {
  border: 1px solid red;
}

5.Grouping Selector:

A grouping selector is similar to other element selectors, except that it groups together more than one element by comma separated.

h1, h2, p {
 background: blue;
}

Attribute selectors:

This CSS attribute selector matches elements based on the value of a given attribute.

a[href="https://example.org"] {
  color: green;
}

Pseudo-classes:

A pseudo-class is used to define a special state of an element. Style an element when a user hovers over it etc.

1 .hover:

The 'hover' indicates that an element is currently being hovered over.

a:hover {
    color: green;   
  }

2.focus:

The 'focus' selector selects the elements that are currently focused on by the user. It is generally used in input elements of the forms and triggers when the user clicks on it.

 input:focus{  
      border:5px solid lightblue;  
    }

3.active:

The 'active' selector is used to select and style the active link.

p:active {
    color: green;   
  }

Pseudo-elements:

This selector is used to insert content before, or after, the content of an element. Pseudo-elements include ::before and ::after, which are used to add something new before or after your content.

::after

The 'after' selector inserts something after the content of each selected element.

p::after {
  content: "is 20 years old.";
}

::before

The 'before' selector inserts something before the content of each selected elements.

p::before {
  content: "My Name is ";
}

Combinator selectors:

A CSS selector can contain more than one simple selector.

1.Descendant Selector:

The descendant selector matches all elements that are descendants of a specified element.

div p {
  color: green;
}

2.Child Selector:

The child selector selects all elements that are the children of a specified element.

div > p {
   color: blue;
}

3.Adjacent Sibling Selector:

The adjacent sibling selector is used to select an element that is directly after another specific element.

div + p {
   color: yellow;
}