What does it actually mean?

What comes in your mind when you think of selectors?

Basically they are used for targeting a particular area, right? And then of course CSS is used for styling our website.

So when we talk about CSS selectors, what they do is simply target a particular area or say an element so that we can put some style in it without making other elements change. With the help of CSS selectors, we don't have to keep repeating ourselves by writing the same style-code for same elements but in different areas, we just have to do it once and tadaa, you have that style everywhere; now isn't it amazing?

Now, let's talk about its different types. Obviously there can't be just one type of it, it's coding, there is always several types of everything! So, let me introduce you with some of them which are used most often...

Types of CSS Selectors

We will use this html file for all the examples in this article..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <nav class="navigation">
        <div class="nav-head">
        <h2> CSS Selectors </h2>
        </div>
    </nav>

    <header class="head">
        <h4>React</h4>
        <p>Json</p>
        <p>Node<p>
    </header>

    <section class="type">
        <div class="container  ">
            <h1 class="different-color">Types</h1>
        </div>
    </section>

    <section class="type">
        <div class="container">
            <h1>Hii
                <p>Hello</p>
            </h1>
            <h3>JavaScript
                <div>
                     <p> Homegnome</p>
                </div> 
                <p>Homealone</p>
            </h3>
       </div>
    </section>

    <footer id= "foot">
        <div class="footer-head">Contact me!</div>
    </footer>
</body>
</html>

1. Universal Selector

Syntax

*{
property : value;
}

Universal Selectors are set usually at the top of a CSS file. Every property inside this block will be applicable on the whole HTML. They really just go and selects all the elements of HTML. But they also have the lowest level of specificity so anything can override this setting and thus it is not really really efficient.

Example

*{
color: red;
}

2. Element Selector

Syntax

element_name{
property : value;
}

Element selector directly target the asked element from the HTML. No matter how many times that element was in the HTML, it will have the style according to the properties defined in this selector.

Example

p{
padding : 1rem;
margin : 1rem;
}

3. Class Selectors

Syntax

.class_name{
property : value;
}

Class selector is one of the most important and most commonly used selector. They are easily to use and very helpful while styling the website. It is a way to select a group of elements and make sure they all have same styles. We can have multiple classes defined for multiple elements.

Example

.container{
color : blue;
}

4. ID Selectors

Syntax

.id_name{
property : value;
}

ID selector is almost same like the class selector except in a whole HTML file, an id can be defined only one time for only one element.

Example

#foot{
background-color : gray;
}

5. Class Inside Element

Syntax

element.class_name{
property : value;
}

This selector says that every element with this class in it will have the mentioned properties. This helps us go a little more selective while styling a webpage.

Example

h1.different-color{
color : yellow;
}

6. Multiple Element Selector

Syntax

element1, element2{
property :  value;
}

Multiple element selector give us the facility of not repeating ourselves where we can set a similar property with same value for two different elements.

Example

p, h1{
color : black;
}

7. Element inside Element

Syntax

element1 element2{
property : value;
}

This selector says that all the element2 which are inside the element1 will have these particular properties.

Example

h1 p{
font-size : large;
}

8. Child-Parent Selector

Syntax

element1 > element2{
property :  value;
}

This selector says that every child element as element2 with a parent element as element1 will have these mentioned properties.

Example

h3 > p{
text-align : centre;
}

9. Neighbor Selector

Syntax

element1 + element2{
property : value;
}

This selector says that an element as element2 which just after element1 or is the immediate neighbor of element1 will bear same properties.

Example

h4 + p{
border : 1px solid black;
}

10. !important

Syntax

element1{
property : value !important;
}

This is a dangerous selector, it makes it concrete that this particular property will be implemented on this element for sure even if it is overridden a thousand times. It will become static for the whole file. We are usually not supposed to use !important as it may become difficult for a new web developer to figure out the problem if he/she tries to change something but that property has !important put by the old webdev.

Example

p{
border-radius : 5px !important;
}

//again p is redefined after sometime

p{
border-radius : 10px;
}

//Border radius will stay 5px because it has an !important in it even if it is redefined later.

For More

There are many types of CSS Selectors, if you want to learn more about it, you can do it here CSS Selectors

Important Note

CSS works in top to down structure so you have to keep in mind what properties are you over-ridding. Usually an inline-style is what affects the CSS directly and overwrites it, but they happen on the individual elements only.

I hope you find this article useful! We can connect through