CSS Selectors provide you the power to select Html elements in your website that you want to target & style. Without CSS selectors it’s impossible to style your web page, so as a beginner it’s the first thing that you encounter, and mastering it will help in your CSS learning.

WHAT IS CSS SELECTOR?

If you have ever written or read CSS before then you have already encountered CSS selectors. They are simply used to select Html elements and apply CSS style to them. There are different types of CSS selectors and let's discuss them one by one.

Types of CSS Selector?

Let's discuss about different types of CSS Selectors starting with:

Element Selector

It is the most basic CSS selector, Element selector selects the basic Html elements by their name. like h1, p, div, header, nav and all other elements.

Let's look at an Element CSS selector example to change the font-size of the h1 element.

h1{
font-size: 13px;
}

Class and Id selector

Class and Id selector selects the Html element by their Class and Id name respectively. To select an element by Class .(period) is used followed by the class name assigned to the element. To select an element by Id #(hash) is used followed by the Id name assigned to the element.

Let's look at an example to change the background color by using the class and Id selector respectively.

.class{
background-color: #0E0E52;
}
#id{
background-color: #449DD1;
}

Universal Selector

The Universal Selector is represented by (*), and it is used to select the whole Html document. It is used to remove the default margin and padding and set it to zero.

*{
margin: 0;
padding: 0;
}

Pseudo Selector

Pseudo Selector are sub-categorized into two parts pseudo-class selector example:- :hover, Pseudo-element Selector example- ::after. These include lots of options to learn them you can go on and read other posts on Pseudo Selectors. But you don’t need to remember all of them.

a:hover{
color: #fff;
font-size: 20px;
}

p::first-line{
text-decoration: underline;
}

CSS [Attribute] Selector

Attribute Selector selects based on the assigned attribute to the element. an attribute is added to the opening tag of the Html element. like Id, Class, title, src, href and there are many different attribute. There are different ways to select the attribute, you can read it in detail.

Let's look at an example to select a type attribute inside the input tag.

input[type="text"]{
background-color: #c1c1c1;
color: #fff;
}

Combination Selector

As the name defines Combination Selector is used for selecting the combination of different CSS sectors. Using a combination selector you can select a group of elements and style them.

h1, p, div, .class, #id{
color: #fff;
}

There are different type of combination selectors, let’s discuss them one by one.

Descendant Selectors

The descendant selector matches all elements that are descendants of a specified element. It is denoted by space.

Let's look at an example based on Descendant combination selector. This will selects all the h1 element inside the div:

div h1{
text-align: center;
}

Child Selectors

The child selector selects all the child elements present in the specified parent element. It only selects the direct child of the parent element. It is denoted by > character.

Let’s look at an example to understand the child combination. In the example, all the p elements which are direct child to the div will be selected.

div > p{
line-height: 1.5rem;
}

Adjacent sibling Selectors

An adjacent sibling combination selector is used to select the element that is directly after specific element. It is denoted by the (+) character.

Let's look at an example of a adjacent sibling combination selector to explain.

div + h1{
letter-spacing:  0.8rem;
}

General Sibling Selector

A General sibling selector selects the elements that are the sibling of an element. It is denoted by the (~) character.

Let’s see an example based on the General sibling combination selector. It will select all the h1 elements which are a sibling of p.

p ~ h1{
Font-weight: 400;
}

Now you should have pretty good knowledge of CSS Selectors and how to use them and now you can use them to create beautiful webpages.

Thanks for reading this article hope you enjoyed it. If you love this Please share and follow me for more such articles.