Selectors Selectors gives an option to select a html element from the DOM and apply styles and animations to it, to make it look cool.

Simple selectors

simple selectors selects element based on universal ,tag, id and class. so that we can style every element in a most spectacular way.

Universal selector

selects all html elements. But this has a lower specificity compared to all of the selectors. we use asterisk(*) to select all html elements.

*{
  padding: 0;
 }

We can also select html element by Tag name.

div{
 display:flex;
}

Class selector

It lets us select html elements with the specific class attribute . To select element of the class we have to give period(.) followed by class name.

.class{
   color: blue;   
}

ID Selector

ID's would have a high specificity compared to all the simple selectors.

#id{
background-color:white;
}

Combination selectors

Selector that we can select multiple elements at once.This would makes our job so much easier. so that we do not have to write same code twice. we select in four combination ways.

Descendant selector (space)

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

div h1{
      text-align: center;
  }

This makes every h1 element in the div align to the centre.

Child selector (>)

The selector selects all the child element in the specific parent element.

div > p{
    color: blue;
}

This selects all the p tags in the that div.

Pseudo-element selectors

Pseudo-element selectors lets us select specific parts of an elements. We can style the first letter, line or before and after of the content in beautiful way.

p::first-letter{
         font-style: italic;
      }

Pseudo-class selectors

A pseudo-class is used to define a special state of an element. That means we can style a element when user mouses over it or visited or unvisited a link

a:hover{
  color: blue;
 }

Attribute selectors

The [attribute] selector is used to select elements with a specified attribute.

a[target] {
  background-color: yellow;
}

Conclusion

This is my understanding on css selector. Hope this helps you too.