Master Css Selectors The Easy Way (part 1)
Tags: css, webdev, beginners, ux
Published: 2022-11-12 21:25:02

so you are here to learn about css selectors. So question arise why we need selectors

In CSS, selectors are used to target the HTML elements on our web pages that we want to style.

so let me explain with code  examples.

**_Scenario _**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kj556oxk9zp0gc220zz.png)

we wanna change background color of "P" element the easiest way is to select an element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzo0l72nlx84qrrky5jt.png)

**Result**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q05eelrulwi8nyvsroz4.png)

we selected an element and change its background color but we can do all sophisticated stuff in this way?

**_Introducing ID and class selectors _**

**_class selector_**

here's a solution to make our lives a little bit easier.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgi9y46vjrhohl9xzsuu.png)

our customer wanna order "Dumplings" so we will add class attribute  in second child of ul and change its background color green as ordered food.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu1on846cf1eyzlhykwu.png)

**_result _**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjgh6s9fs4hqtvtkszyp.png)

oh no our customer changed mind and he want more food he want "Ma Po Tofu" also  fortunately class selector come to save us we have to just add "orders" class in that element also.

**NOTE** classes always targeted with "." in css 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdezbmddeypt08wncvtq.png)

**_result_**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eonl3bv5awjneoljc9yr.png)

so we get the idea of how classes work but what about "id's" and why?  id's here when classes can do everything let's talk about that.

**_Id selector _**

id is simple just we can target one element with one id I mean id will be always unique we can't use it with multiple elements 
**NOTE**  id's always targeted with "#" in css 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mcgk0ji6krr850n50i7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9md8of3hldj1h8vu6uk.png)

**_result_**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa73z37x6a19x9gncgrs.png)

But if we want add same id to other element** we cant **
but we can add same class to multiple elements so i think it'll make sense obviously .

**So these are most basic selectors **

**_BUT_**

_if you wanna become css guru bear me more _

Next one 
**_ chained selector_ **
lets assume we have requirement to style a button but not one button 3 buttons  all buttons have similar styling but third one has bit different so let see how we can accomplish this with chained selectors 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tv537t4fkzxv931rk7o.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv1sc5gu89v95yv87ukz.png)

so in above example we can clearly see how chained selectors can help us in different situations.

**_result_ **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pdwn2a3i0zkh8odlehe.png)
let see another example to clear this concept more 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cpieo1snydogybxv0f6.png)

here our goal is to target li element which have " bg_black and text_white" classes
 
**_Css will be _**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23k4md67hannaajj2t02.png)

**_result_ **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo2tud587r3r13u77m81.png)

in this snippet we are telling in whole page any 'li'  element which have "bg_black and text_white" classes change its background color and text color 

 **_Direct Child Selector _**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd5dut4xwznpi5yzy4ui.png)
in same snippet  with some changes we used above what if we want to target all  "li" element so we accomplish this via Direct Child Selector.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd8cdcj3fw894rhiytx2.png)
**result**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxk4k9rv7py821bmttyf.png)
**Note**

3rd li which is not direct child is not selected.

**_Adjacent Sibling Selector_**

The + selector is used to select an element that is directly after another specific element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82hkj83onbr6hk4otejy.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c98amtlkm1l7aovcx2rf.png)

**_result_ **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pth541aj3jzpwym4i3xl.png)

**_Hover selector_**
hover is relay simple selector when we mouse over on any element it'll apply CSS which we want 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09csrg12s2zywmsg1kdl.png)

**_result _**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uv42topnioa7ehrnu6uj.png)
 
**_Before Selector_**

before selector  is pseudo selector which inserts something before the content of each selected element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx5ijmwldtmdmffa61b3.png)


**_result _**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y64lbmtp6zcs7pdgepem.png)

**_After selector _**
After selector is completely opposite of before selector so its relay simple 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9klo691brrno74vflu0j.png)

**_ result _** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv2675h1581t8l7xp7m.png)

so we can clear see result now button is before blue box.

So today we learn few css selectors if you want to learn more in this beginner friendly way stay connected Thanks.