The ID with Class Selector
Maybe I am just the last one to the show (or forgot I could do this), but I recently discovered that the class and id attribute can be used in combination with each other to select a specific element. For instance, say we are in the "About" section of a website. Now, inside of that section you might have another section called, "The Company" (about > the company). While in this section the body element might look like so:
<body id="about" class="theCompany">
So, to provide a specific style for an element inside of the body element on this page only (and not pages with id="about" only) all you would have to do is create a style that looked like this:
body#about.theCompany .navigationHere{
/*styles here*/
}
Things could even get more specific if you decided to add an element into the mix. For instance you could add the same id and class value to an element but change the element itself to dictate a different style depending upon what element is wrapping the content. That sounded complicated as words alone, let me show an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
div#duck1.goose {
background-color: #000000;
}
span#duck2.goose{
background-color:#FF0000;
display:block;
}
-->
</style>
</head>
<body>
<div id="duck1" class="duck goose"> </div>
<span id="duck2" class="duck goose"> </span>
</body>
</html>
All and all, this type of stuff is really handy when trying to target a specific element, on a specific page, with a specific style.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
Yeah… this is a great help in building out web applications. I usually set section id’s on the body to add page specific styling without having to necessarily create a separate stylesheet or define all new class names for minor tweaks on existing relevant classes.
@Jonathan – Yup, by adding a class too you can add another layer. So that you have, body#about and body#about.aboutsubsection. Does that make sense?
absolutely makes sense. being able to sub-select like that is nice.
In your company code example, I think this line:
#body.theCompany .navigationHereShould be rewritten to this:
#about.theCompany .navigationHereBut I could be wrong…
Either way, this is a really cool tip – thanks!
I always thought the CSS guidelines say you should never use more than one ID of the same name on a page. Although this is helpful it does go against the guidelines. You may reuse class names but ID’s should be unique.
@Anonymous – You are correct, I wrote this example rather quick…so sorry about the error.
I’m pretty sure this doesn’t work in IE6, nor does multiple class selectors, e.g. .duck1.duck2 { ... }. Surprise surprise.
nope, doesn’t work in IE6… seems like the only fix for this is to use a second style sheet which can get messy… http://isaacschlueter.com/tests/multi-selector-test.html