DEV Community

Cover image for CSS Selectors 101: Targeting Elements with Precision
Kunal
Kunal

Posted on

CSS Selectors 101: Targeting Elements with Precision

#webdev #learning #coding #css

What if someone just built your house and they forget to paint it

Does your house look good ??

NO , becouse paint gives your house a better look

In website , CSS do the same

In this blog we will discuss :

  • What is CSS ?
  • Element selector
  • Class selector
  • ID selector
  • Group selectors
  • Descendant selectors
  • Basic selector priority (very high level)

CSS

CSS short for Cascading Style Sheet it is use to represent the design for a webpage . Lets look at each word individually first .

1. Cascading : Flowing step-by-step where one thing affect the another. In CSS style apply in a order mean it only changes where we want to .

2. Style : How something look or designed basically how your webpage appears .

3. Sheet : A file/page where you write style for your website .

👉 CSS allows you to create great looking website .

css

Thats how Amazon looks like without css

Element selector

Element selector : The element selector selects HTML element based on the element name

<p>this is a paragraph </p>
Enter fullscreen mode Exit fullscreen mode

If you want to change the color of the element you just

p{
  color : red 
}
Enter fullscreen mode Exit fullscreen mode

There are several type of selector in which we just target the selector to apply the desired design or style

Class selector : The class selector uses the class attribute of an HTML element to select a specific element

<p class="text-red"> Great blog like plz </p>
Enter fullscreen mode Exit fullscreen mode

To select elements with specific class write the (.) character before class name

.text-red{
 color : red 
 }
Enter fullscreen mode Exit fullscreen mode

You can use this class name anywhere where you want to add this red text color.

ID selector : The id selector uses the id attribute of an HTML element to select a specific element

This ID is unique means this id selector is used to select one unique element

<p id="first"> Like it atleast </p>
Enter fullscreen mode Exit fullscreen mode

To select an element with a specific if , write a hash ( # ) character .

#first{ 
  color : red 
 }
Enter fullscreen mode Exit fullscreen mode

An id cannt be start with a number

Group selectors : As , you know we use class or id to target a specific element so that some style can be applied to them .

There are other type of css selector available that can use the collective elements for the style simultaneously .

h1{
     font-family:Verdana,sans-serif;
}

h2{
     font-family:Verdana,sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Now , after using the group selector , it will lot like

h1, h2{
     font-family:Verdana,sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Descendant selector : These are the selectors that select HTML element inside another element

<div>
 <p> Great blog </p>
</div>
Enter fullscreen mode Exit fullscreen mode

Now if i want to change the color of p element

div p {
  color : red 
    }
Enter fullscreen mode Exit fullscreen mode

Its mostly used to style parent child element

Basic selector priority

We have look a lot of type of css selctor that selects the HTML element in which we want to apply style or design . But there are some priority in it .

I will go from Least to Higher priority .

Element secector ( p, div )
⬇️
Class selector ( .box )
⬇️
ID selector ( #header )
⬇️
Inline style ( <p style="color : red"> this is paragraph </p> )

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

kunal_dev image

Kunal

My tokens expired idk how to write bio. 😪🫠

Top comments (0)