Hi there,

Buckle up folks, We are going on a ride of CSS Selector which is used to Customize your HTML elements to make webpages look stunting.

What is CSS Selectors

CSS selectors basically allow you to select the HTML element(s) that you want to style very precisely, with the help of element's id, class, type, attribute etc.

What are Selector options do you have ?

1. Universal selector
2. Individual selector
3. Class and Id selector
4. Chained selector
5. Combined selector
6. Inside an element
7. Direct child
8. Sibling ~ or +

Let's Talk about each of them one by one.

1.Universal selector

When we used this, Universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page.

Syntax

* {
        /* Write your styles here */
  }

Example

After applying above rule you find that all the elements colour change to green. Sounds Cool Na!!

It's you time to try

2.Individual selector

When we used this, Use when you can specify any HTML element to apply the CSS on Individual elements. It will check the entire DOM tree for that element and wherever it finds that element it will apply that CSS style to it.

Syntax

any-html-element {
        /* Write your styles here */
}

Example

After applying above rule you find that all para tag elements background change to hex-code as you provide(alter colour name) as well as text colour change hex-code as you provide(alter colour name) . Sounds Cool Na!!

It's you time to try

3.Class and Id selector

• Class Selector

When we used this, Use when you want to create a style for a particular class for any HTML element. The ( . ) dot is used to access the class for styling the element.

Syntax

 .class-name{
        /* Write your styles here */
}

• Id Selector

When we used this, Use when you want to create a style for a particular Id for any HTML element. The ( #) hash is used to access the Id for styling the element.

Syntax

 #Id-name{
        /* Write your styles here */
}

Class and Id selector Example

After applying above rule you find that all para tag elements with class warning text color change to Yellow , In the same way you find that all para tag elements with Id danger text color change to Red . Sounds Cool Na!!

It's you time to try

4. Chained selector

When we used this,When you want to target those HTML elements which has exact same class names defined in it. Only those elements will get affected who has all those class names which are in the chain.

Syntax

element.class-name1.class-name2 {
        /* Write your styles here */
}

Here,

• element == Any HTML element (<p>,<li>,<div> and more).
• class-name1 == A class specific in that element.
• class-name2 == Another class specific in that element

What the syntax is saying, give me the element with these chained class names.

Example

So here, as we seen in the syntax

• element == li
• bg-black == A class specified in that element
• text-white == Another class specified in that element

After applying above rule you find that the element <li> with class names bg-black and text-white will be targeted in the given example. ( i.e. item1 of the <ul> list will have the CSS style ). Pretty Interesting 🙂 !!

It's you time to try

5. Combined selector

When we used this, When you want to target multiple elements at the same time. We can separate the elements by adding ( , ) commas between the elements.

Syntax

element01,
element02 {
      /* Write your styles here */
}

Example

After applying above rule you find that you can target <span> and <li> tag together , Save you from typing same keys twice 😎.

6. Inside an element

When we used this, When you want to target the element which is nested deep in the DOM tree. In the above syntax, element03 is nested inside of element02 and element02 is inside of element01.

Syntax

element01 element02 element03 {
        /* Write your styles here */
}

Example

HTML snippet

After applying above rule you find that you can target the element which is nested deep in the DOM tree. Little bit confusing, Need practice. 😦

7.Direct child

When we used this, When you want to target the direct child of the parent element.

Syntax

parent > direct-child {
        /* Write your styles here */
}

Example

Both the <li> elements will have the style as specified, as they are the direct child elements of <div>. The <ul>element remains unaffected as it is not the target element.

After applying above rule you find that you can target the direct child of the parent element. One of mine favourite. 😋

8. Sibling ~ or +

When we used this, When you want to target the Sibling element of the an element.

Syntax

• Using +

.class-name + next-element {
        /* Write your styles here */
}

• Using ~

.class-name ~ next-element {
        /* Write your styles here */
}

Example

• CSS snippet using +

After Applying the selector sibling + you will notice that the only the next of sibling is will change. Don't just believe try on your see the result.

• CSS snippet using ~

After Applying the selector sibling ~ you will notice that the all the next of sibling is will change. Don't just believe try on your see the result.

That's all for this article and with that, it's a wrap! I hope you found the article useful. Thank you for reading, If you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback!

I create content about Programming, Design, and Technology, If this is something that interests you, please share the article with your friends and connections. You can also subscribe to my newsletter to get updates every time I write something!

Ta da! Until we meet again Happy Coding! ❤️