CSS Selectors

With CSS you get the power to design the HTML documents properly, so, to do that effectively we need to learn how to use the CSS selectors properly and today we will be doing just that.

Element Selector: A quite obvious selector, this one! For example:

a{
color:blue;
background:red;
}

color:blue;

background:red;

}

This will force the matched elements(all the a tags) to have the color blue and background red!

ID Selector: In an HTML tag when you use an ID of an element as: <h1 id=”some_id” >Some Heading</h1> You are not just doing that for javascript uses, you can use it for design purposes as well:

#some_id{
margin-left:20px;
}

#some_id{

margin-left:20px;

}

The above code will match all the elements with id=some_id.

Although some browsers might render expected results but you are not supposed to use the same id for more than one element in an HTML Document(ID=Identifier, Du’uh!).

Class Selector: Now what to do when you wanna apply the same styles to a set of elements. Well, that is when the class attribute of the HTML tags comes into play. Suppose there are two tags as such:

<h1 class="yo">Some Cool heading</h1>
<a href="#" class="yo" >Some Link</a>
<style>
.yo{
color:white;
background:orange;
}
</style>

<h1 class="yo">Some Cool heading</h1>

<style>

.yo{

color:white;

background:orange;

}

</style>

Now, as expected, both the elements will be styled according to our rules as both of them were having the same class and we defined our CSS rules to match every element having the class=yo.

Descendant Selector: Most of the times the HTML Documents have a lot of tags, nested inside other tags and we obviously cannot give a class/id to every other element. CSS comes to the rescue again by providing us with the descendant selector. Consider this piece of code:

<div>
<p>Some paragraph here(inside the div tag)!</p>
</div>
<p>Another paragraph (not inside the div tag).</p>
<style>
div p{
background:yellow;
}
</style>

<div>

<p>Some paragraph here(inside the div tag)!</p>

</div>

<p>Another paragraph (not inside the div tag).</p>

<style>

div p{

background:yellow;

}

</style>

Your browser should render something like this:

DEMO

Some paragraph here(inside the div tag)!

Another paragraph (not inside the div tag).

Lets consider another example for getting a good grasp at the concept.

<div>
<p>Some paragraph here(inside the div tag)!</p>
</div>
<p>Another paragraph (not inside the div tag).</p>
<style>
p{
background:red;
}
div p{
background:yellow;
}
</style>

<div>

<p>Some paragraph here(inside the div tag)!</p>

</div>

<p>Another paragraph (not inside the div tag).</p>

<style>

background:red;

}

div p{

background:yellow;

}

</style>

Now, you should see something like this:

DEMO

Some paragraph here(inside the div tag)!

Another paragraph (not inside the div tag).

Well, what happened here? Let me explain. The browser first encounters the “p{…” rule from the style tags, renders the result for all the matched elements, then goes to the next rule and again repeats the process.So, when the second rule tells the browser that the background color of all elements matching the “div p” rule should be yellow, then that overrides the earlier rule, according to which it should have been red.

The rules that occur later in the document flow have a higher priority than those which occur earlier! There are other ways of determining priority as well, though!

The Direct Descendant Selector: This one is just like the descendant selector except that it only matches an element which is nested to just one level of the parent element.For example:

<div class="test">
<p>Nested level 1</p>
<div><p>Nested level 2</p></div>
</div>
<style>
.test > p{
color:red;
}
</style>

<p>Nested level 1</p>

<div><p>Nested level 2</p></div>

</div>

<style>

.test > p{

color:red;

}

</style>

The above should show something like this:

DEMO

Nested level 1

Nested level 2

I think its quiet obvious whats happening here, The first paragraph is a direct descendant of a div, so, it gets matched to the rule defined and gets a red color.

Combination of Selectors: A great thing about CSS is you can make even match elements with some custom combination based on any valid CSS selectors. For example:

div#abc{} /*This will match the div with id abc*/
div .some_class{} /*This will match all the elements having class=<strong>some_class</strong> that are a descendant of a div element*/
#abc div > p a{} /*Figure it out yourself :P */

div#abc{} /*This will match the div with id abc*/

div .some_class{} /*This will match all the elements having class=<strong>some_class</strong> that are a descendant of a div element*/

#abc div > p a{} /*Figure it out yourself :P */

Hope, I helped you a little to understand how the basic selectors work in CSS. There are a lot more advanced and useful selectors that one can use in his projects. But we will get there in a little time. Until then, keep sharing learning and practicing!