homepage Welcome to WebmasterWorld Guest from 54.205.59.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Styling a <p> that's followed by <ul>
CSS selector question
pillsbur




msg:4078581
 7:15 pm on Feb 11, 2010 (gmt 0)

Hi,

How do I style a <p> that's followed by a <ul> using selectors? I know how to style the <ul> that follows a <p> (the '+' selector does that), but how do I go the other way? In other words, how do I indicate "precedes" instead of "follows"?

:n-child won't work for me in this case since I don't want to lock in a specific page order beyond the sibling relationship between <p> and <ul>.

Basically I want my style to affect the E1 instead of the E2 (as W3C refers to them).

Thanks,
Glenn

 

Fotiman




msg:4078595
 7:48 pm on Feb 11, 2010 (gmt 0)

Are you trying to style something like this?

<p>
<ul>...</ul>
</p>

If that's what you're trying to do, you should note that <p> elements can't contain <ul> elements, so the browser will close the first <p> implicitly when it encounters the <ul>.

If that's not what you are trying to do, perhaps you can post the relevant markup snippet.

pillsbur




msg:4078599
 8:01 pm on Feb 11, 2010 (gmt 0)

No, no, I know about p and ul being block level elements. ;-)

I'm doing something very simple:
<p>Here is some content.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

I don't want to style every <p> on the page, just the <p> that's followed by <ul>.

Does that help?

alt131




msg:4078602
 8:06 pm on Feb 11, 2010 (gmt 0)

how do I indicate "precedes" instead of "follows"?

So far as I am aware, you can't.
However, can you reverse the thinking - for example if you have

<p> ... </p>
<ul ... </ul>
<p> ... </p>

Can you get at the p as
[size=3]ul + p[/size] ?

Or, the general sibling combinator
[size=3]ul ~ p[/size] for something like:
<ul> ... </ul>
<h2> ...</h2>
<p> ...</p>


[edit]for semantics[/edit]

CSS_Kidd




msg:4078603
 8:10 pm on Feb 11, 2010 (gmt 0)

You are thinking about Adjacent sibling selectors [w3.org]

alt131




msg:4078605
 8:14 pm on Feb 11, 2010 (gmt 0)

You are thinking about Adjacent sibling selectors [w3.org]

As the OP specified, the question was how to select the preceeding element, not the following element.
[edit]For grammar ... sheesh ;)[/edit]

pillsbur




msg:4078637
 8:59 pm on Feb 11, 2010 (gmt 0)

My goal in this is to remove the whitespace above a <ul>. That requires margin-top:0 for the <ul> and margin-bottom:0 for the <p>. However, I don't want to set margin-bottom:0 on every <p> on the page.

I suppose I could do a class declaration just for those <p>s I want to change, but that seems so......manual.

But, if selectors can't do it -- and I think I agree that it can't be done -- then a new class will have to be the way.

Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved