CSS selectors are used to find HTML elements & style them. CSS selectors are of five types.

• Simple Selectors
• Combinator selectors
• Pseudo-class selectors
• Pseudo-elements selectors
• Attribute selectors

Let us take look at them one by one.

Simple Selectors

Simple selectors are of three types. They are used to target HTML elements by tag name, class name or ID.

//Tag name Selector
p{
    color: gray;
    background: white;
}

//Class name Selector
.myclass{
    color: gray;
    background: white;
}

//ID Selector
#myid{
    color: gray;
    background: white;
}

//Universal Selector
*{
    color: gray;
    background: white;
}
//Selects every tag present in document.

As shown above here actual tag name, class & ID is used to target HTML elements for styling which is pretty much simple to understand.

Combination Selector

There are four types of combination selectors

• descendant selector ( )
• children selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

//descendant selector
div p {
  color: gray;
}
//Selects all the p's which are inside div.

//children selector
div > p {
  color: gray;
}
//Selects all the p's which are direct children of div.

//adjacent sibling selector
div + p {
  color: gray;
}
//Selects first p which is immediately placed after div.

//general sibling selector
div ~ p {
  color: gray;
}
//Selects all p's placed after div.

Note: Above examples are shown using tag selectors (e.g. div & p) but you will get same results if you use id or class names as selector.

Pseudo class Selector

Pseudo class selectors are used to select HTML elements when they are in a particular state. e.g. when cursor is hovered on element or when an element is focused.

syntax- selector:pseudo_class{ ... }

a:active {
  color: gray;
}
//Selects active link

input:checked {
  color: gray;
}
//Selects checked input element

input:enabled {
  color: gray;
}
//Selects every enabled/disabled input based on pseudo class

p:empty {
  color: gray;
}
//Selects every p's which has no child

p:first-child {
  color: gray;
}
//Selects only that p's which are first-child of its parent

p:last-child {
  color: gray;
}
//Selects only that p's which are last-child of its parent

p:only-child {
  color: gray;
}
//Selects only that p's which are only child of its parent

p:nth-of-child(2){
  color: gray;
}
//select p if it is 2nd child of its parent

p:nth-last-child(3){
  color: gray;
}
//select p if it is 3rd last child of its parent

p:first-of-type {
  color: gray;
}
//Select p's which is first of its type to its parent

p:last-of-type {
  color: gray;
}
//Select p's which is last of its type to its parent

p:only-of-type {
  color: gray;
}
//Select p's which is only of its type to its parent

p:nth-of-type(3){
  color: gray;
}
//select p if it is 3rd of its type of child to its parent

p:nth-last-of-type(2){
  color: gray;
}
//select p if it is 2nd last of its type of child to its parent

input:focus{
  color: gray;
}
//selects input which is focused/clicked

input:hover{
  color: gray;
}
//selects input on which mouse/cursor is hovered/ on it.

a:link{
  color: gray;
}
//selects all unvisited anchors/links

a:visited{
  color: gray;
}
//selects all visited anchors/links

input:optional{
  color: gray;
}
//select input element with no required attribute

input:read-only{
  color: gray;
}
//select input with read only attribute

input:required{
  color: gray;
}
//select input with required attribute

input:invalid{
  color: gray;
}
//select input with invalid value

Note: Above examples are shown using tag selectors (e.g. div & p) but you will get same results if you use id or class names as selector.

Pseudo element Selector

Pseudo elements are used to select specific part of HTML elements. (e.g to insert content before or after)

syntax- selector::pseudo_element{ ... }

p::after{
  color: gray;
}
//insert content after p

p::before{
  color: gray;
}
//insert content before p

p::first-letter{
  color: gray;
}
//selects first letter of p

p::last-letter{
  color: gray;
}
//selects last letter of p

p::first-letter{
  color: gray;
}
//selects first letter of p

p::first-line{
  color: gray;
}
//selects first line of p

p::selection{
  color: gray;
}
//selects portion of p that is selected by user

End Notes: Hope you like the blog. If you have any suggestions please feel free to comment. Happy Coding! Good Day!