RSS

CSS pseudo-letter ???

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1021 | Replies: 6

•

Join Date: Jan 2006

Location: Land of Hope & Glory

Posts: 88

Reputation: j4mes_bond25 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

CSS pseudo-letter ???

Apr 28th, 2006

Bearing in mind CSS needing less code typing than HTML & its capability to merely have one single style sheet that's linked with other HTML document & hence having less codes, I wonder if there's a way that helps me achieve the following:

>> I want ALL my paragraph that comes STRAIGHT AFTER any heading (h1/h2/h3/h4, etc.) to have first letter as "pseudo-letter". NOT all the paragraphs but ONLY the one that comes immediately after any of these heading.

.......................... STYLE SHEET ................

#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................

.......................... HTML DOCUMENT ................

<p class="first-letter">

.......................... STYLE SHEET ................

In order to achieve such thing, I HAVE TO go through the entire HTML document & change any <p> tag that comes immediately after any heading (<h1>, <h2>, etc.) to <p class="first-letter">.

The result works on BOTH Internet Explorer & Firefox.

However, I tried:

.......................... STYLE SHEET ................

#content h2+p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................

When I did so, I DID NOT have to type:

<p class="first-letter">

in my HTML document (as I'm doing now), however, in that case, it ONLY works in Firefox & NOT the Internet Explorer.

I wonder if anyone around could possibly point me in the right direction.

My current website can be seen on:

homepage.ntlworld.com/darsh25/alcohol.html

ENTIRE STYLE SHEET CODE

Help with Code Tags

(Toggle Plain Text)

/* CSS Document */

body 
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

div.banner
{
	width:40px;
	height:100px;
}


div.banner img
{
	width:40px;
	height:50px;
}

/* ......................................... Top Menu .................................... */

#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}

#topMenu ul
{
	list-style: none;
	font-size:medium;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
	padding: 0;
}

#topMenu ul li 
{
	display: inline;
	border:1px solid black;
	width:210px;
	background-color:white;
	color:#FF00FF;
	float:left;
	position: relative;
	font-size:large;
}

#topMenu ul li:hover
{
	background-color:black;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:large;
	color:blue; 
}

#topMenu a:hover
{
	color:white;
	text-transform:uppercase;
}

body {behavior: url(csshover.htc);}


/* ....................................... Left Menu .......................................... */

#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}

#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
}

#leftMenu ul li
{
	display: block;
	background-color:white;
	width:120px;
	border-bottom:thin solid red;
	color:blue;
	position: relative;
	font-size:large;
	line-height:50px; 
}

#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}

#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:121px;
	width:123px;
	top:0px;
}

#leftMenu ul li ul a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}

#leftMenu ul li ul a:hover
{
	color:#00FFFF;
	background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ........................... Left Menu Link Rollover Showing Image ....................... */

#leftMenu li img
{
	position:absolute;
	top: 190px; 
	left: 55px; 
	height: 50px; 
	width: 50px;
}

#leftMenu li img {display:none;}
#leftMenu li:hover img {display:block;}


/* ................................... Content ................................................ */

#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
}

#content h2
{
	font-family:"Times New Roman", Times, serif;
	text-align:justify;
	margin:1em;
	color:#990033;
	text-decoration:underline;
}

#content h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
	font-size:large;
	margin-left:20px;
	color:blue;
	text-decoration:none;
}

#content h4
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:red;
	margin-left:20px;
	text-decoration:none;
}

#content h5
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:fuchsia;
	margin-left:20px;
	text-decoration:none;
}

#content h6
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:medium;
	color:black;
	margin-left:20px;
	text-decoration:underline;
}

#content table
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:medium;
	color:black;
	margin-left:20px;
}

#content p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	margin:1em 2em;
	color:black;
}

#content p.first-letter:first-letter
{
	color:red;
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:10px 50px;
	list-style-image:url(list_icon.gif);
}

#content ul li
{
	margin-top:15px;
}

#content ol
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:1em 1em 2em 3em;
	list-style-type:decimal;
}

#content ol li
{
	margin-top:20px;
}

#content img.left
{
	float:left;
	padding:10px;
}

#content img.right
{
	float:right;
	padding:10px;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}

/* CSS Document */

body 
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

div.banner
{
	width:40px;
	height:100px;
}


div.banner img
{
	width:40px;
	height:50px;
}

/* ......................................... Top Menu .................................... */

#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}

#topMenu ul
{
	list-style: none;
	font-size:medium;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
	padding: 0;
}

#topMenu ul li 
{
	display: inline;
	border:1px solid black;
	width:210px;
	background-color:white;
	color:#FF00FF;
	float:left;
	position: relative;
	font-size:large;
}

#topMenu ul li:hover
{
	background-color:black;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:large;
	color:blue; 
}

#topMenu a:hover
{
	color:white;
	text-transform:uppercase;
}

body {behavior: url(csshover.htc);}


/* ....................................... Left Menu .......................................... */

#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}

#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
}

#leftMenu ul li
{
	display: block;
	background-color:white;
	width:120px;
	border-bottom:thin solid red;
	color:blue;
	position: relative;
	font-size:large;
	line-height:50px; 
}

#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}

#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:121px;
	width:123px;
	top:0px;
}

#leftMenu ul li ul a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}

#leftMenu ul li ul a:hover
{
	color:#00FFFF;
	background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ........................... Left Menu Link Rollover Showing Image ....................... */

#leftMenu li img
{
	position:absolute;
	top: 190px; 
	left: 55px; 
	height: 50px; 
	width: 50px;
}

#leftMenu li img {display:none;}
#leftMenu li:hover img {display:block;}


/* ................................... Content ................................................ */

#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
}

#content h2
{
	font-family:"Times New Roman", Times, serif;
	text-align:justify;
	margin:1em;
	color:#990033;
	text-decoration:underline;
}

#content h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
	font-size:large;
	margin-left:20px;
	color:blue;
	text-decoration:none;
}

#content h4
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:red;
	margin-left:20px;
	text-decoration:none;
}

#content h5
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:fuchsia;
	margin-left:20px;
	text-decoration:none;
}

#content h6
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:medium;
	color:black;
	margin-left:20px;
	text-decoration:underline;
}

#content table
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:medium;
	color:black;
	margin-left:20px;
}

#content p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	margin:1em 2em;
	color:black;
}

#content p.first-letter:first-letter
{
	color:red;
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:10px 50px;
	list-style-image:url(list_icon.gif);
}

#content ul li
{
	margin-top:15px;
}

#content ol
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:1em 1em 2em 3em;
	list-style-type:decimal;
}

#content ol li
{
	margin-top:20px;
}

#content img.left
{
	float:left;
	padding:10px;
}

#content img.right
{
	float:right;
	padding:10px;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Apr 2004

Posts: 3,757

Reputation: Dave Sinkula is a glorious beacon of light

Rep Power: 17

Solved Threads: 147

Dave Sinkula Dave Sinkula is offline

Offline

long time no c

Re: CSS pseudo-letter ???

Apr 28th, 2006

I know very little CSS, but is :first-child a possibility?

http://www.w3schools.com/css/css_pseudo_classes.asp
http://www.w3schools.com/css/tryit.a...ss_first-child

[edit]Oops. I just noticed this: (does not work in IE) from the first link.

High Plains Blogger #plains #lounge ## I, for one, welcome our new socialist overlords.
"Capitalism is the unequal distribution of wealth. Socialism is the equal distribution of poverty."

•

Join Date: Jan 2006

Location: Land of Hope & Glory

Posts: 88

Reputation: j4mes_bond25 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS pseudo-letter ???

Apr 28th, 2006

•

Originally Posted by Dave Sinkula

I know very little CSS, but is :first-child a possibility?

http://www.w3schools.com/css/css_pseudo_classes.asp
http://www.w3schools.com/css/tryit.a...ss_first-child

[edit]Oops. I just noticed this: (does not work in IE) from the first link.

I never used that, but even if that was the possiblity, it doesn't work in Internet Explorer.

www.rewboss.com is the website whereby this guy has used a combination of "h2+p" (in his style sheet, which you can ONLY see if you had a web developer plug-in in Firefox) but that ONLY works with Firefox & NOT the Internet Explorer, I'm afraid.

I want ALL the <p> coming immediately after "h2/h3 & h4" to have pseudo-letter.

I'm yet exploring into it, but to no avail, I fear.

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Dec 2004

Posts: 1,592

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS pseudo-letter ???

Apr 28th, 2006

What you've done is exactly correct: you've implemented the "Adjacent Sibling" selector (the plus sign) and the CSS2 "first-letter" pseudo-class.

It should work perfectly, and does in FireFox. What you've discovered is yet another IE bug: it doesn't support Adjacent Sibling Selectors. You might say that IE is a pain in the Adjacent Sibling Selector.

Last edited by tgreer : Apr 28th, 2006 at 7:30 pm.

•

Join Date: Dec 2004

Posts: 1,592

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS pseudo-letter ???

Apr 28th, 2006

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.

•

Join Date: Jan 2006

Location: Land of Hope & Glory

Posts: 88

Reputation: j4mes_bond25 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS pseudo-letter ???

May 2nd, 2006

•

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 ;)

•

Join Date: Dec 2004

Posts: 1,592

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS pseudo-letter ???

May 2nd, 2006

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.

Help with Code Tags

(Toggle Plain Text)

<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.