CSS selector is a part of CSS rule set which is actually selects the content of your page which you want to give style.

There are different kinds of selectors available.

Universal Selector: Apply CSS on all of the elements

copytext

* {
 
   color: red;
}

* {

   color: red;
}

Element Type Selector: Apply CSS on the particular attribute or element.

copytext

ul {
   color: red;
}

ul {
   color: red;
}

ID Selector: Apply css Corresponding to same ID

copytext

#attributeId {
   color: red;
}

#attributeId {
   color: red;
}

Class Selector: Apply CSS to those which have same Class

copytext

.box {   
   color: red;
}

.box {   
   color: red;
}

Descendant Combinator: Apply Css on those for which we have Combine two or more selectors so that we can be more specific in our selection method.

copytext

#container .box {   
    color: red;
}

#container .box {   
    color: red;
}

Child Combinator: Apply CSS to the child elements

copytext

#container > .box {
   color: red;
}

#container > .box {
   color: red;
}

General Sibling Combinator: Apply CSS based on Sibling elements

copytext

h2 ~ p {
   color: red;
}

h2 ~ p {
   color: red;
}

Adjacent Sibling Combinator: Apply CSS based on adjacent sibling elements

copytext

p + p {
     color: red;
}

p + p {
     color: red;
}

Attribute Selector: Apply CSS on those particular tag which have same attribute.

copytext

input[type="text"] {
      color: red; 
}

input[type="text"] {
      color: red; 
}

Pseudo-class: Apply CSS on the class which does exist in the js events.

copytext

a:hover {
   color: red;
}

a:hover {
   color: red;
}