Introduction

In general, We will use CSS to style our HTML document. To style our HTML document it is important to select the correct element. Selectors are used to target the element which we want to style. The most basic CSS selectors are:

ID selector
Class selector
Element selector
ID Selector
The id of an element is unique in the HTML page. So the ID selector uses the id attribute which is present in the HTML document to select the element we want to style. The ID selector uses "#" to target by id. For example #new, #first.
Class Selector
The Class selector uses class attribute to select a specific class. The Class selector uses "." to select the target by class. For example: .but_one, .nav_bar.
Element Selector
The Element selector uses element name i.e. HTML tag name to style the target. It uses "" to target an element. For example p, li.
Other Selectors

- Chained Selector
Chained selector uses more than one element to get our desired output. For example, p.ol.li
- Grouping Selector
Combination of two or more selectors can be done by separating them with a comma. Ex: p, li, ul, div
- Universal Selector
Universal selector selects all the elements present in HTML page. We can use Universal selector with the help of "*".
- Combinator Selector
A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS:
1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)