The parent-child selector won't help. Don't give up on what I've posted.
For FireFox, it is entirely CSS. The script compensates for IE, using JavaScript. The script isn't that hard to understand; it's only a few lines long.
<script type="text/javascript"
function doChangeClassName()
{
var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
x[i].childNodes[1].className = "ie_p";
}
}
</script>
The trick is to place your headers and paragraphs into DIV elements.
The first line of the function stores all the DIV elements inside a variable, "x".
Next comes the "for loop", which steps from one DIV to the next, counting them, and storing the count in a variable, "i".
Inside the loop, we look for the second element inside the DIV. The header is the first, the first paragraph is the second. We start counting at "0", so the line
x[i].childNodes[1].className = "ie_p"; means "set the class of the first paragraph in this div equal to the 'ie_p' style declaration".
That's it. Oh, and to run this script, there is this little bit at the bottom:
<script>doChangeClassName();</script>
It's very simple, very elegant, and introduces no noticable delay.
If you're attempting to develop CSS skills, then you shouldn't neglect Javascript skills. Both are required to be a successful
web designer.
