Styling a that's followed by <ul>

Forum Moderators: not2easy

Message Too Old, No Replies

Styling a that's followed by <ul>

CSS selector question

pillsbur

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

Hi,

How do I style a that's followed by a <ul> using selectors? I know how to style the <ul> that follows a (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 and <ul>.

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

Thanks,
Glenn

Fotiman

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

Are you trying to style something like this?


<ul>...</ul>


If that's what you're trying to do, you should note that elements can't contain <ul> elements, so the browser will close the first 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

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:
Here is some content.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

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

Does that help?

alt131

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

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

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>
 ...

[edit]for semantics[/edit]

CSS_Kidd

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

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

alt131

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

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 . However, I don't want to set margin-bottom:0 on every on the page.

I suppose I could do a class declaration just for those 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.

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

CSS selector question

pillsbur

Fotiman

pillsbur

alt131

CSS_Kidd

alt131

pillsbur

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week