How to style first paragraph <p> of the content differently without using css class , ID or javascript, with IE6 compatibility ?

Question

How to style first paragraph <p> of the content style differently without using inline css, css class , ID or javascript. ? with IE 6 compatibility too.

Answer 1

:first-child

Won't work in IE.

Answer 2

Use the :first-child selector in the CSS.

div:first-child {
  background: #C00;
  color: #FFF;
}

Note: For :first-child to work in IE, a <!DOCTYPE> must be declared.

Ref: http://www.w3schools.com/css/pr_pseudo_first-child.asp

Answer 3

Using first-child with IE6 which can solve your problem has already been answered here:

http://stackoverflow.com/questions/982759/is-there-any-fix-for-child-selector-in-ie6

Answer 4

From your question it seems like your only option is to use different tags (since you've excluded everything else). You could write an entire paragraph in h6 or something.

Your response to Kobi seems rude to me and not helpful. You're only telling people what you don't want, but maybe if you told us what you do want, you'd get better answers. The only thing I'm seeing is you really want the solution to be IE6 compatible. I don't see how that excludes all the other options you've decided don't work for you.

Answer 5

There is no way of doing this that works in IE6 without:

• using inline style on the first paragraph;
• giving the first paragraph a class to use in a selector; or
• using Javascript to achieve one of the above.

IE7+ supports the :first-child pseudo-element:

p:first-child { color: red; }

The best solution is to give that paragraph a class that you can explicitly style if IE6 support is required. Alternatively style the element with Javascript. With jQuery it's simply:

$(function() {
  $("p:first").addClass("first");
});

with:

p.first { color: red; }

Answer 6

You could use the <font> tag. It's not standards compliant, but most browsers will support it, and it doesn't use CSS at all.

<p><font size="+1" color="red">Paragraph 1</font></p>

<p>Paragraph 2</p>