Hi there today i will be taking you through various types of CSS selectors. You can think of CSS as color paint on a car because without color paint a car looks bland and just like that without CSS a HTML webpage looks bland. So CSS selectors are used to style a particular HTML element.

Types of CSS Selectors:

Universal Selector
Type Selector
Grouping Selector
Class Selector
Id Selector
Descendant Selector
Child Selector
Sibling Selector
Attribute Selector
Pseudo Selector

1. Universal Selector

Universal selector is kind of self-explanatory since it selects all the elements. Example:

*{
  color: red;
}

Result: It will change all the text color to red in the HTML page.

2. Type Selector

Type selector is also known as element selector and it used to select a particular element from HTML file. Example:

h1{
  background-color: black;
}

Result: It will change the background color of element h1 (heading 1) to black.

3. Grouping Selector

Grouping selector is used to select multiple elements at the same time. In this multiple elements have to be seperated by comma(,). It saves lots of time and effort and it also reduces the code we have to write. Example:

h1,h2,p,{
font-family: Poppins;
}

Result: It will change the font family or fonts of h1 (heading 1), h2 (heading 2), p(paragraph).

4. Class Selector

Class selector are one of the most used selectors in css. It is used by using dot(.) before the class name for example if i want to create a class "apple" then i would write like ".apple" this. It will select everything that have class ".apple". We can apply same class to multiple elements. Example:

.apple{
font-size: 50px;
color: orange;
}

Result: It will change color of text to orange and font size to 50px in elements having class (.apple).

5. Id Selector

Id selector is used by using (#) before the id name like "#orange". Once a id is created it can only be used once for that particular element , So if you want to apply a style to particular element only then you can use id selector. Example:

#orange{
text-decoration: underline;
}

Result: It will underline the text having id(#orange).

6. Descendant Selector

Descendant selector is always consist of 2 or more selectors seperated by white space . It is used when we want to select an element that is descendant of another element. Example:

div h1 {
color: red;
}

Result: It will change color of h1 (heading 1) that is descendant of div to red.

7. Child Selector

Child selector is used between two selectors by using ">" when we want to select a element that is the child of another element. Example (below here h1 is the child of div element so i will use):

div>h1 {
background-color: brown;
}

Result: It will change color of h1 (heading 1) which has parent div to brown.

8. Sibling Selector

Sibling selectors are of 2 types : a) Adjacent Sibling Selector and b) General Sibling Selector.

a) Adjacent Sibling Selector : It is used by using (+) between two selectors that must have same parent. Example:

div+p {
color: black;
}

Result: It will change color of p(paragraph) to black that comes after div.

b) General Sibling Selector : It is used by using (~) between two selectors that must have same parent. Example:

div~p {
color: red;
}

Result: It will change color of all the p(paragraph) to red that comes after div.

9. Attribute Selector

Attribute selector is used when we want to select elements that have our specified attribute. Example (here [guide] is our specified attribute):

h1[guide] {
color: yellow;
}

Result: It will change color of h1 (heading 1) that have our specified attribute [guide] to yellow.

10. Pseudo Selector

Pseudo selectors are of two types a) Pseudo Classes and b) Pseudo Elements and both of these are special type of selectors.

a) Pseudo Classes : Pseudo classes are used to select a element when it is in a specific state. Most commonly it's used in hovering over a element. It is used by using ":" and pseudo class name after the element that we want to select. Example:

button:hover{
   color: blue;
}

Result: It will change color of element button to blue whenever the button will be hovered over by the mouse pointer.

b) Pseudo Elements : Pseudo element are used to style a particular part of the content. It behaves as a proper element in HTML although it is not added in HTML file. It is used by using "::" before the pseudo element name. Example:

p::first-line {
 font-size: 50px;
 color: red;
}

Result: It will change color to red and font size to 50px of only first line of my p(paragraph).

Thanks for reading my article on CSS : SELECTORS. Kindly leave your feedback inside comment section below.

Css : Selectors