Comprehensive CSS Basics For Beginners:Summary 05

Welcome back. We are still on the run with Comprehensive CSS basics for beginners, a tutorial we started a couple of days ago. So for today, we are going to learn about selectors.

Taking of selectors reminds me of our childhood a long time ago while living in the village. Back then we were rogue and rude that we couldn't miss disciplinary session every evening by the Disciplinary master who happed to be our mother. At time we were sent to shop and something deceives you to squander the change. That is when your mother will select you, style you like nobodies business and leave you to go and cry at a venue of your own choice. End of story .

Well, without wasting much of your time, ladies and gentlemen, Lets do this.

1. Direct Child Selector

It selects an element which is a child to the selector. An example would explain better.

<div class="parent">
<h1>I am a child</h1>
</div>

To style the child therefore, we would write something like this.

.parent  > h1 {
background:green;
color:white;
}

Did you see the symbol we used, it is >.

2. General Sibling Selector

By sibling we mean elements that are next to each other, in other words both are children of the same parent.

For this:

<div class="parent">
<div >sibling</div>
<div >sibling</div>
</div>

we would do:

.parent > div ~ div {
background:red
}

Seems complex ? Nah, I don't think so. We are simply using direct child selector together with sibling selector. Got it now? Let's go to the very next one.

3. Direct Sibling Selector.

I know you might be wondering, what the hell is direct sibling selector again?

Let me explain, sometimes you want to only select the sibling that is just next to the selector without touching the rest of the siblings. So, how do we do that. Direct sibling now comes in to the rescue.

<div>
<ul>
<li>one</li>
<li>Two</li>
</ul>
</div>

Lets select the next li after the first one.

ul > li + li {

background:blue;

}

Conclusion.

That is it for today, We are working on preparing a video for this series. Should you be interested, Please let me know in the comments section. Thanks.