Welcome to WebmasterWorld Guest from 54.226.143.14

Forum Moderators: not2easy

Message Too Old, No Replies

Styling a <p> that's followed by <ul>

CSS selector question

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

5+ Year Member



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
7:48 pm on Feb 11, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
8:01 pm on Feb 11, 2010 (gmt 0)

5+ Year Member



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?
8:06 pm on Feb 11, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]
8:10 pm on Feb 11, 2010 (gmt 0)

5+ Year Member



You are thinking about Adjacent sibling selectors [w3.org]
8:14 pm on Feb 11, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]
8:59 pm on Feb 11, 2010 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month