Applying multiple css selectors to the same element

There can be scenarios wherein, you have a selector defining the width style like (w05,w30,w500 etc) and there is another set of selector that gives a border style like (b01, b02 etc…). You want to apply a full 2px border to an element and give it a width of 500px. In this case you can combine your css selector.

The definition of the child element css property will look something like below:

<style type=”text/css”>

.w500 {width:500px;}

.b02 { border: 2px solid #330;}

</style>

<div class=”b02 w500″>Hello World</div>

Just by providing a space between the selectors, we give the div a border of 2px and width of 500px.

Now, in case you want to access this particular element from jQuery or javascript, keeping in mind that you will have to select a div, which has its selectors as b02 and w500 (not separately), all you need to do is use the ‘.’ operator

p.bo2.w500 { height:50px;}

$(“p.b02.w500”).hide();

It’s a simple, yet powerful concept we have out here.