Probably everybody know how to match dom elements with css. For example if you want to match all <li> elements. you are doing something like this:
This way every list element will have red text color.
The more advanced example is if you want to select only the active element – an element with a specific class. This way you are adding a style like:
This way only the active elements (list elements with class active) will have red text color.
Ok, but what if we want to match elements which has 2 specific classes?
Let’s say you have following structure:
How to make the first list element to be with red color?
The obvious solution is to add an extra class like this:
but what if there is an easiest solution?
Try this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Selectors</title>
<style type="text/css">
.first{color: green;}
.second{color: blue;}
.first.second{color: red;}
</style>
</head>
<body>
<ul>
<li class="first second">test 1</li>
<li class="first">test 2</li>
<li class="second">test 3</li>
</ul>
</body>
</html>
As you may notice the css selector which is used is .first.second, so no spaces between them.
This way you can assure that only the element which has class first and second will meet the criteria and will be colorized in red. This notation works with ID’s as well, but basically if you have ID, then you know what is the exact element, so it’s useless, but for selection of two classes I think it really useful.
I would like to know if somebody knew about this way of selecting elements?
I thought it was impossible, thank you for the tip! Maybe we never had notice of this feature because it doesn’t work in IE6, but now we can ignore this browser without any problem
Hm, I haven’t tested in all browsers. Thanks for letting me know. But in fact I also didn’t support the IE6 anymore 🙂
IE6 is no longer supported by almost no site.
Sad thing is that many people dont upgrade to the IE7 – 8 or 9 so many will have this problem. 🙁 Thank you for this nice tutorial, take care.
Brilliant, thanks, David.