# Master CSS selectors with Examples
### **#Introduction**
What is CSS Selector[🤔](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwisz-SWp9v7AhVow4sBHcl7DbQQFnoECAsQAQ&url=https%3A%2F%2Femojipedia.org%2Fthinking-face%2F&usg=AOvVaw3Wu41wpPz_mCuyzPUV60n4) CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text and to have control of every element in a web page for modification, we use selectors.
Let's Start...
`HTML code for all the examples:-`
```xml
Lets Learn CSS Selector
- Meta
- Apple
- Amazon
- Netflix
- Google
This is a paragraph
```
1. **Universal Selector**
It is used to target the whole body using an asterisk(\*).
*Example:-*
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670008605914/bba56201-3d8a-44c3-b40b-e907dde5a07a.png align="left")
2. **Individual Selector**
It selects all the elements with the matching node name present in the HTML, if we want to select all the divs then we will write div { } else if we want to select all the list items we will write li { }
*Example:-*
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670008381017/961979a2-7f5e-44f4-8b6a-87e6a7a106be.png align="left")
3. **Combined Selector**
It is used to avoid repeating the same line of code as well as to group the elements having similar properties. the elements are separated by commas.
*Example:-*
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670010063966/1c236b9b-049b-4f5e-b66e-d897b44f9a7b.png align="left")
4. **Inside an Element**
In this selector, we target all the matching node elements present inside the DOM.
*Example:-* here all the elements inside div which has ul which contain li are being selected whereas if we only write `div li` then all the li inside div will be selected.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670011406104/4734fcaa-6797-445c-9a66-9d34d09302b5.png align="left")
5. **Direct Child Selector**
In this selector, all the elements one level deep inside the mentioned element will be selected, like, if we write `div > li` all the li next to the div will be selected except the li inside the ul
*Example:-*
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670012029266/4f6a6963-a1a1-418d-929f-1abd70d92b03.png align="left")
6. **Sibling Selector**
It is of two types General(~) and Adjacent(+), Let's understand through an *Example:-*
The general selector selects all the elements next(immediate or not) to the element with class name list\_1
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670013801635/757d9142-4357-483a-932a-f0099c56ef8d.png align="left")
whereas the Adjacent selector selects the element immediately next to the element with class name list\_1.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670013870407/78b25d67-b7f8-4c4d-9623-d4c916c8ae19.png align="left")
7. **Class name and Id name**
We can also select any particular element by its class name or id name, for this we need to first give a class name or id name to the element and then we can make style changes by calling the class using the (.) symbol and id by using (#) symbol.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670014627300/bc74e283-ae33-423b-bf52-c9e8e90755b4.png align="left")
Here we can also target the element like `div.list_1` or `div#list_2` which will give a more precise selection for the style, i.e. I want to select only that div which has the class name of list\_1 or I want to select only that div which has the id name of list\_2. The advantage of selecting like this is that we can use list\_1 as the class name for several elements paragraphs, anchor tag, etc, but if we want to target any particular element then we write in a specific way otherwise all the elements with that same class name will be reflecting that style property.
8. **Pseudo Classes**
👉**Hover**
`:hover` selects the element when the user hovers over the target using pointing devices like a mouse.
*Example:-*
👉**Focus**
`:focus` is used to select the element like button or input boxes, when the user clicks or selects the element.
*Example:-*
👉**Enabled & Disabled**
`:enabled` and `disabled` is used in input boxes to select it and to show if the input box is enabled or disabled.
*Example:-*
👉**Root**
`:root` It represents the root directory in the hierarchy of the document in the html. It is generally used to store CSS Variables. var(variable-name) is used to access these variables.
*Example:-*
👉**First Child, Last Child and Nth Child**
`:first-child` `:last-child` & `nth-child()` selects the first, last and the nth element of the parent element respectively.
*Example:-*
👉**Before & After Pseudo Elements**
`:before` pseudo selector selects an area of the content before the desired element whereas `:after` pseudo selector selects an area of the content after the desired element
*Example:-*
👉**Marker**
`::marker` It is used to make a few changes in terms of the appearance of the bullets of the list items.
*Example:-*
👉**Selection**
`::selection` is used to make changes in terms of looks to the selected area or text by the user. using selection, we can only make changes to the color, background, cursor, and outline.
*Example:-*
👉**First Letter & First Line**
`::first-letter` selects the 1st letter of the desired paragraph whereas the
`:first-line` selects the 1st line of an element or a paragraph.
*Example:-*
**Reference**
1. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
2. [W3Schools](https://www.w3schools.com/css/css_selectors.asp)
### Thanks for reading
Connect with me on:
🧑🚀[Linkedin](https://www.linkedin.com/in/ravindap04)
🚀[GitHub](https://github.com/ravindrap04)