Using multiple pseudo-classes in one selector

So just for fun, I wanted to see if I could make Table Ruler style effects using only the :hover pseudo-class. Of course, that was pretty simple. I could get most anything I wanted done just using: tr:hover { }.

Quickly I realized that I could have more fun. What if I wanted to differentiate not only the row, but the cell. And this was born:

Hover over these rows and table cells

Column 1	Column 2	Column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit	Vivamus cursus iaculis ante.	Etiam mi nulla, porttitor vitae, euismod in, pharetra in
Lorem ipsum dolor sit amet, consectetuer adipiscing elit	Vivamus cursus iaculis ante.	Etiam mi nulla, porttitor vitae, euismod in, pharetra in
Lorem ipsum dolor sit amet, consectetuer adipiscing elit	Vivamus cursus iaculis ante.	Etiam mi nulla, porttitor vitae, euismod in, pharetra in

The CSS, again, is very simple:

<style type="text/css">
	table { border: 1px solid #000; width: 75%; }
	tr td { border: 1px solid #000; padding: .5em; }
	tr:hover { background-color: #eee; }
	tr:hover td { border-color: #900; } 
	tr:hover td:hover { background-color:  #ffcc00; }
</style>

I'm pretty sure that it has been along time since anything I've tried to do in CSS was difficult.