HTML helps in creating web pages. It allows us to develop and semantically structure web pages using the tags and attributes provided. But creating only HTML documents would not suffice for the visual appeal that a web document must have. So, here comes the role of CSS.

CSS(Cascading Style Sheets)

CSS is a language for specifying how documents must be presented visually. With only HTML we can easily create web pages but those web pages will be dull looking and can make the web a boring place. We can use CSS for styling the HTML elements. We can do so by specifying rules for the elements and that’s why it is sometimes called rule-based language.

To apply the styles, we first select the element on which we want to apply the style and then specify the styling properties which we need.

Source: MDN

So, we can say the first and most important task of CSS is selecting the elements. And to do the same, CSS provides us with different types of selectors.

Types of selectors:

1. Type, Class and ID selectors
2. Attribute Selectors
3. Pseudo classes and Pseudo elements

Type, Class, and Id selectors - These selectors target an HTML element such as <p>, <h1>, <div>, etc. Ex:

h1{
   //styling rules
}

It also targets elements with class names such as <div class="box">content</p>

.box{
//styling rules
}

It also targets elements with Ids such as <div id="box">content</p>

#box{
//styling rules 
}

Attribute selectors - As we already know , all HTML elements have some attributes with them and therefore we can style the elements based on their attributes also. Let’s say there’s a <a> tag with the title attribute and another <a> tag with no title attribute :
<a title="link" href="#">Link 1</a>
<a href="#">Link 2</a>
As we can see both links are almost the same, so we can’t use type selectors as both are a
Tags, but there is a slight difference in both and that is the title attribute, so now we can selectively style link 1 using this title attribute .

a[title]{
//styling rules
}

Pseudo Classes and Pseudo Elements

Pseudo-classes: These are the keywords that we add to an element’s selector to specify the state of the element. We use this selector to select elements in a specific state such as hover, active, disabled, etc. Example:

 h1:hover{
//styling rules
}

In the above example, we will select the h1 tag only when the user hovers the pointer over it.

Pseudo elements : These are the keywords that we add to an element’s selector to style a specific part of the selected element. Syntax:

Selector::pseudo-element{
      //styling rules;
}

Example:

p::first-letter{
//styling rules;
}

The above example specifies that the styling rule will only be applied to the first-letter of the p element. So now all the p tags in the document will have their first letter styled according to the styling rules we specified.

Some of the other pseudo elements are: 1.first-line 2.after 3.before 4.placeholder 5.marker

Tip: MDN has the best documentation so far on CSS. So, refer to MDN docs to gain more in depth understanding of the CSS selectors.