DEV Community

Amarachi Johnson-Ubah
Amarachi Johnson-Ubah

Posted on • Updated on

CSS Selectors, Simplified

When I started out with CSS, I always used the class and Id selectors and nothing else.
With time I learnt about some other ways of selecting items in CSS and I'll be sharing them with you with illustrations of how they work.

So, let's get to it.🎾

What are CSS selectors?

CSS selectors are a means through which we're able to identify, find or call up elements in HTML so we can style it.
The most common selectors are the name of element , class selectors(.) and id selectors (#) which are also referred to as simple selectors.

<html>
  <head>
     <style>
        body{
        background-color:#000;
        }
        .title{
         color:dodgerblue;
         }
        #wrapper{
        display:flex;
        justify-content: center;
        margin:0;
        padding:0;
    </style>
  </head>
       <body>
       <div id="wrapper">
       <div class="title">
       <p> This is the first text. </p>
       <p class="second-paragraph"> This is the second text. </p>
       </div>
       <p>This is the third paragraph</p>
       </div>
       </body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the example above, body, title class and wrapper id were used to refer to the div elements bearing them.
We can also combine these selectors if we want to:

p .second-paragraph{
color:red;
}
Enter fullscreen mode Exit fullscreen mode

In the code above, a name and class selector were used to ensure that only the p element with a class second-paragraph will be selected.

There are other selectors as well, which are the main focus of this article.
Let's take a look at the *, >, ~, space, , and nth-of-type selectors, shall we?

The * Selector

This selector is called the universal Selector because it is used to select all the elements in a page. This means that any style given to the universal selector, affects every element in that very page.
The code snippet below will style every element of the page to have grey-colored and right-aligned texts.

*{
color:grey;
text-align:right;
}
Enter fullscreen mode Exit fullscreen mode

The > Selector and The ~ Selector

This selectors are also known as combinators. Both are used to achieve different selection results.
While the > is used to select children of a particular element, the ~ selector is used to select all the siblings of a particular parent element.
An example to illustrate.

div > p{
color:blue
}
Enter fullscreen mode Exit fullscreen mode

The code above is used to select all <p> elements that are the children of the div elements.

Now, look at this one

div~p{
color:red;
}
Here, every `<p>` element which is a sibling to a `div` element is styled red. In our previous example (the first code snippet), the paragraph which is on the same level and shares the same direct parent with any `<div>` will take up the red color.
Enter fullscreen mode Exit fullscreen mode

The Space Selector

A lot of people confuse > selector and the space selector.
I'll try to clarify that.
The space selector is used to select every of a particular element which is inside another element.
For instance

div p{
color:green;
}
Enter fullscreen mode Exit fullscreen mode

The code above will select all <p> tags which are inside the <div> element, even if other elements are in between them.
Now, the difference between this and the > selector is that the > is only used to select a particular element which is a direct descendant.

So if we have

div>p{
color:green;
}
Enter fullscreen mode Exit fullscreen mode

Only <p> elements which are direct descendants of the <div> will be colored green.

The , Selector

This, also called the group selector is used to group classes or names with the same styles to avoid repetition of codes.
The code below,

h3{
color:blue;
text-align:center;
font-weight:100;
}
p{
color:blue;
text-align:center;
font-weight:100;
}
.mid-text{
color:blue;
text-align:center;
font-weight:100;
}
Enter fullscreen mode Exit fullscreen mode

can be rewritten as

h3,p,.mid-text{
color:blue;
text-align:center;
font-weight:100;
}
Enter fullscreen mode Exit fullscreen mode

The nth-of-type selector

This selector can be used to select the nth child of parents elements of a particular type. n can be a number or keyword.
Consider having the following codes:

<html>
       <head>
              <style>
                   div:nth-of-type(1){
                    color:red;
                    }
                    div:nth-of-type(2){
                    color:blue;
                    }
                    div:nth-of-type(3){
                    color:green;
                    }
              </style>
       </head>
       <body>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
       </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Yes, feel free to reach out to me on twitter , and thanks for reading.

Top comments (11)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

Thanks so much. I've fixed it.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Nice article :)

Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

Thanks for reading Alvaro

Collapse
 
felipe0liveira profile image
Felipe 0liveira

Excelente post.
I recommend you to use the Code Snippet with language to make the code more readable, with highlights and identation

Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

I'll do that. Thanks so much.

Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

I'm glad you liked it

Collapse
 
_gameaddicted profile image
Fajar Ansori

Thanks for sharing this!

Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

I'm glad you found it useful

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Justo en lo que estoy. Gracias. Buena aportación de css.

Collapse
 
amarachijohnson profile image
Amarachi Johnson-Ubah

Me alegro que lo hayas encontrado útil