CSS Selectors 101: Targeting Elements with Precision

If you have just started your web development journey, you already know about CSS. Using CSS you can beautify your website which is on plain HTML. Now, what if you want to give style to a specific element of your page ? In this blog you will get to know what CSS Selectors are and how they can help us target elements with precision.

What are CSS Selectors ?

Imagine you’re at a crowded party. If you shout "Hey!" everyone looks at you. If you say "Hey, person in the blue shirt," only a few look. If you say "Hey, Rohan Ghosh," only one person responds.

CSS Selectors work the exact same way. They are the "addresses" you use to tell the browser which HTML elements should receive which styles.

Element Selectors

It’s the simplest way to style in HTML. You just target a element tag and the style is applied to every element that is made using the tag.

For eg:

p {color:blue;}

Here we have used an element selector which targets the paragraph (<p></p>) elements. This style will turn every paragraph text color to blue.

Class Selectors

Imagine you want to give the same style to multiple elements but not all of them in the page. You assign them a class and then apply the styles by targeting that class. Hence as the result the style will be applied to each element with the class assigned to it.

For eg:

<p class="highlight">Hello this is highlighted</p>
<p>Hello this is not highlighted</p>

.highlight {background: yellow;}

Here the paragraph with the highlight class assigned to it is the only one whose background is changed to yellow. While the other paragraph elements remain the same.

To use class selectors we use .class as the syntax.

ID Selector

Now, if you want to give styles to a specific element in the whole page, we use ID Selectors. You simply assign an id to an element and then use #id as the selector and then apply styles to it. As the result the style gets applied to the element with the id.

For eg:

<p id="highlight">Hello this is highlighted</p>
<p>Hello this is not highlighted</p>

#highlight {background: yellow;}

Grouping Selectors

If you have an h1, an h2, and a p that all need to be centered, we don't have to write the code three times. We can simply use commas to separate them and assign the styles.

For eg:

h1, h2, p { text-align: center; }

Descending Selectors

Sometimes you only want to style something if it’s inside something else. Here we can simply use descending selectors to style the element.

For eg:

nav a { color: white; }

This means there is an anchor tag inside nav element and we want its text color to be white.

Specificity

Now you might ask which of those selectors has the most priority and after that which selectors have less priority, here is the priority sequence.

1. ID Selector (Most Priority)

2. Class Selector (Less Priority than ID Selector)

3. Element Selector (Least priority)

Thank You

With this, the blog ends and now you know what are css selectors, why we need them and how to use them. Now you just have to try each of them and practice with it.