Applying style to first para only

[Tino]

Hi,

I've looked through a good few tutorials and CSS reference guides, and tried searching for this problem but had no luck.

Basically, I'm designing a Joomla template, and the paragraph I am trying to style is part of the generated content so I have no access to the html, so I can add a class.

There are 2 paragraphs within a <td>, and the first one is a heading, so I would like to style that seperately from the second paragraph, which is the content.

Am I right in thinking there is a way of only applying style to the first instance of a tag within another tag? Or have I just made that up?

Any help greatly appreciated!

Thanks!

[BGarner]

You can't edit the html? That kind of screws you up a bit when trying to style only one paragraph. Can you post the generated html code?

[Tino]

Yeah tell me about it, 2 second job to sort if I could edit the HTML!

HTML: Select all

		<div id="main">			<div class="frame">				<div class="bg">								<table cellpadding="0" cellspacing="0" class="moduletable">					<tr>				<th valign="top">					Newsflash				</th>			</tr>					<tr>			<td>						<table class="contentpaneopen">				<tr>			<td valign="top" colspan="2">				<p>Latest event</p><p>The latest Cash In Your Pocket event is to be held in Northfield. Click for more</p>			</td>		</tr>

I know that .contentpanopen tr td p {} would allow me to style the paragraphs, but it would do both of them.

[BGarner]

Can "<p>Latest event</p>" not be changed to something like "<h2>Latest event</h2>"? Then you could style the h2 or whatever.

[Tino]

No, unfortunately not. The furthest into the above code that I have control over the HTML is to the <div class="bg"> tag.

I had it in my head that were was a way of applying a style to the first instance of a tag only. But after a whole lot of searching I can't find anything, so I'm starting to think I've imagined reading it before!!

Cheers for the replies.

[BGarner]

Yeah I've googled it a couple of times and I can't find anything.

[Ryan Fait]

http://www.w3.org/TR/REC-CSS2/selector.html

These will help you, but they're support is extremely limited. No go in IE. If you can add JavaScript, you can do it with that. Otherwise, you're out of luck.