Originally Posted by tgreer
Of course, if your goal is to simply avoid the need to MANUALLY add the class to the first paragraph, then you can write a script to do it for you.
Consider this test page:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>T.Greer Adjacent Sibling Test</title>
<style type="text/css">
h1
{
margin: 0;
text-align: left;
font-family: Verdana;
FONT-SIZE: 10pt;
COLOR: #000;
text-decoration: none;
font-weight: bold;
padding-left: 25px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0px;
}
p
{
margin: 0;
text-align: justify;
width: 475px;
font-family: Verdana;
font-size: 7pt;
color: #000;
text-decoration: none;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 0px;
}
h1 + p:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.ie_p
{
margin: 0;
text-align: justify;
width: 475px;
font-family: Verdana;
font-size: 7pt;
color: #000;
text-decoration: none;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 0px;
}
.ie_p:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
</style>
<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>
</head>
<body>
<div>
<h1>First Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
</div>
<div>
<h1>Second Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna. Ut et tellus quis leo commodo condimentum. Nam augue neque, venenatis ut, auctor sed, sagittis id, lorem. Suspendisse porttitor eleifend felis. Sed et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales, lectus sit amet fermentum malesuada, magna diam porta turpis, a volutpat ante tellus nec tortor. Vestibulum cursus nibh vel dui. Proin quis massa facilisis risus gravida eleifend. Nunc vel eros eget arcu porta ultrices. Duis a nunc quis risus dapibus egestas. Maecenas in nunc. Suspendisse placerat, turpis quis consequat ultrices, neque nisi varius massa, quis elementum purus est ut magna. Suspendisse a turpis ac massa nonummy nonummy. In dolor.</p>
</div>
</body>
<script>doChangeClassName();</script>
</html>
[/html]
Works great, you don't even need to do a "browser test", as the script has no adverse affects, at least on my test page, in FireFox.
I might be able to achieve the result, but since understanding JavaScript is beyond me, I'm afraid, it seems to make less sense in writing a code that I don't understand. Beside, the main reason of this website is that employers can check my CSS skills before considering my job application. I wouldn't want to give them the impression of me using JavaScript MEANS that I'm a dab hand at it, which is for sure not the case, I fear.
While browsing the Internet for the past few days regarding it, I stumbled upon this website:
http://www.hwg.org/resources/faqs/cssFAQ.html#selector
Check question no: 18 (What is parent-child selector? [CSS2])
Would that be of any help, since I tried using it, but all in vain (result doesn't display in IE or Firefox) ???
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
