CSS Based on Multiple Class Values

I love the way I have the head­er of this blog set up to dis­play ran­dom images. I think it adds visu­al draw to the page, mak­ing RickBeckman.org look bet­ter than per­haps it real­ly is. How­ev­er, I think it would be nice to be able to have cer­tain head­ers dis­played on cer­tain days with no ran­dom­ness involved. For instance, my sec­ond wed­ding anniver­sary is rapid­ly approach­ing (8 days!), and I want­ed a way to show a cer­tain head­er image on that day all day long with­out com­pro­mis­ing the ran­dom­ness of any oth­er days’ headers.

Well, I was pok­ing around K2 (the Word­Press theme cur­rent­ly in use here) look­ing for a way to do that. K2 is crazy pow­er­ful, due to its use of Sand­box-inspired seman­tic class names, so I knew this would­n’t be a dif­fi­cult task.

And I found myself star­ing at the BODY dec­la­ra­tion in this blog’s source…

There it was, all the infor­ma­tion I need­ed in order to tap into for date-spe­cif­ic styling: y2007 m09 d09 h12. With it, I could manip­u­late the site’s style based on year, month, day, or even hour. Thank you K2! (And Sand­box!) Styling an ele­ment is easy enough; in this case I would want to apply styling to the #header block. And I could even style it in a way that only affects a change on the seventeenth:

body.d17 #header {
	background: url("anniversary.jpg") !important;
}

That’s very triv­ial. All that code does is apply style to the #header ele­ment only when the BODY tag has a class of d17, which will only be true on the sev­en­teenth of the month. The !important tag exists in order to over­ride the styling for ran­dom head­er images which appears a bit lat­er in this site’s source code.

How­ev­er, as that style def­i­n­i­tion stands, it will show my anniver­sary image on the sev­en­teenth of every month unless I remove the code after it’s done its part.

That’s not good enough; I want­ed to be able to take advan­tage of the fact that K2 gives me both a day and a month class to deal with. But how to access that infor­ma­tion via style sheet?

Well, it turns out that mul­ti­ple class val­ues can be addressed in styling! I’m unsure how cross-brows­er com­pat­i­ble this is, but it works in Inter­net Explor­er 7 and Fire­fox 2. And it allows me to have my per-day styling with­out hack­ing any­thing oth­er than my custom.css file.

This is what the final def­i­n­i­tion looks like:

body.m09.d17 #header {
	background: url("anniversary.jpg") !important;
}

Now #header is only going to receive that spe­cial styling on the sev­en­teenth day of Sep­tem­ber. Score!

As many class val­ues as need­ed can be addressed pro­vid­ed that they are all sep­a­rat­ed by a full stop (“.”). So if I real­ly want­ed to, I could pull all the class val­ues in that BODY dec­la­ra­tion above and do some­thing like this:

body.wordpress.k2.y2007.m09.d09.h12.home.loggedin.columns-two.lang-en { }

The lev­el of styling this opens up is vir­tu­al­ly inex­haustible, and I real­ly feel weird even talk­ing about it — I’m by no means design­er enough to take full advan­tage of such a pow­er­ful styling frame­work, but I hope some­one read­ing this is. Enjoy!

Leave a Comment

Your email address will not be published. Required fields are marked *

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Rick Beckman