firstchild element?

[polorboy]

I want to use css to style the first word of every <p> tag within a div that has a specific id. How can I do this? It is a pretty big document and I don't want to have to go through for each <p> and put a span with a style in it.

[KDLA]

There are pseudo elements called :before and :after, but they don't work in IE6 (don't know about IE7).

Take a look: http://www.w3schools.com/css/css_pseudo_elements.asp

KDLA

[polorboy]

I don't think that will do it, that will put something before or after the tag, not in the tag. For example say I want to bold and italic the first word of this:

<p>The first word should be bold and italic</p>

How can i do that for multiple <p> tags in a very large document (like a glossary of terms A - Z) without having to put a
<strong><span style="font-style:italic">Content</span></strong> around every word I want to do it to? Can't CSS do that same thing to every first word of a <p> without having to do that?

[KDLA]

Yes, you're right. I was thinking of first-letter and/or first-line, which are on the same page as :after and :before.

I don't think CSS alone can control the appearance of one word. It relies on container tags for the style specifications.

There might be a javascript alternative, but I doubt it would be any easier than the span method, using a class:

.first {font-weight: bold; font-style: italic}


<p><span class="first">The</span> first word should be bold and italic</p>

KDLA

[polorboy]

I guess I am going to have to go through word by word :( , and add a span to each one. My fingers are going to be sore when I am done, lol.