CSS child selectors: h3+p

selecting childs in Internet Explorer?

[Darkelve]

Hi,

I'm trying to increase the padding for all 'p' elements that are 'childs' of a h3 element (or is that 'siblings'?).

so I have some lines of text like:

<h3>Header 3</h3>
<p>This is a test</p>
<p>This is a test</p>
<p>This is a test</p>
<p>This is a test</p>

And *all* of the paragraphs following that 'h3' element should have extra padding.

In firefox, following CSS seems to work:

#stage h3+p, #stage h3+p+p, #stage h3+p+p+p, #stage h3+p+p+p+p {
padding-left: 10px; 
}

But in Internet Explorer (6.0), it doesn't do anything at all.
Which selectors/which method can I use to obtain this result in IE?

[Robin_reala]

It's siblings. In this case you actually want to use the CSS3 'general sibling' selector:

h3 ~ p { padding-left: 10px; }

IE6 lacks support for nearly all selectors, but IE7 and some other browsers (including Firefox and Opera) support this.

If this is a special case you could wrap the contents in a div with an id or class then write your rule to be:

div#my_div p { padding-left: 10px; }

[Darkelve]

"If this is a special case you could wrap the contents in a div with an id or class then write your rule to be:"

Unfortunately, it's a pattern that appears on many, many webpages of the site...

I wish all browsers would already support CSS3! :¦

[edited by: Darkelve at 12:29 pm (utc) on Aug. 29, 2006]

[Robin_reala]

Well, considering that CSS3 Selectors module isn't even technically recommened for implementation yet I think we're doing alright :) Your '+' selector is in CSS2.1 and does work for finite values of <p> but again, no support in IE6.

I suppose the alternative is to specify your padding left for all <p>s and special case the others? Not ideal.

Maybe you could just ignore IE6 and lower? :)

[Darkelve]

"Maybe you could just ignore IE6 and lower? :)"

ROFL... I wish! :-]

[Robin_reala]

For what it's worth I suspect a large number of IE6 users are going to jump suddenly up to IE7 as it's being distributed by automatic update. A few styling quirks might be acceptable for the 15-20% of IEs left over.

[Darkelve]

Which reminds me...

when is this? 'cause the IE-specific hacks might break things for IE7...

[Robin_reala]

They've not revealed much yet but I'd guess end of this year, beginning of the next. For what it's worth, we're currently on Release Candidate 1 so it might be a good idea to start checking now. Have a look at the IE7 RC1 thread [webmasterworld.com] for more info...