0

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

/* 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;
}
3
Contributors
6
Replies
7
Views
11 Years
Discussion Span
Last Post by tgreer
0

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.asp?filename=trycss_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.

0

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.

0

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:

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

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.

0

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:

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

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.