Jquery: find any paragraph that is followed by an unordered list, then apply CSS rule

At the moment i have a css rule that applies a padding-bottom:13px; to all paragraphs.
Unfortunately, this gap doesn't look good when an unordered list immediately follows a paragraph.

So, I would like to apply a margin-top:-13px; to the unordered list.

I need jquery code that:

1. Searches inside a div content.
2. In this div content, find any paragraph that is followed by an unordered list, apply margin-top:-10px to the unordered list

I know the Jquery code to find the paragraph and apply css rule goes something like this I think,
$('p').css( "margin-top", "-13px" );


Sample HTML Code

 
<div class="content">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

<p>This is a title </p>
<ul>
  <li>the quick brown fox</li>
  <li>jumped over </li>
  <li>the lazy sheep</li>
</ul>

<p>This is another title </p>
<ul>
  <li>the lazy sheep</li>
  <li>jumped over </li>
  <li>the quick brown fox</li>
</ul>
</div>

Open in new window


Thanks!
jeremyllAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
>>At the moment i have a css rule that applies a padding-bottom:13px; to all paragraphs.
How about applying NO padding to P preceeding UL:
<script type="text/javascript">
$(function(){
	$('ul').prev('p').css( "margin-bottom", "0px" );
});
</script>

but if you want the apply it to the ul, try:
$('p + ul').css('margin-top','-13px');

Open in new window

0
 
leakim971Connect With a Mentor PluritechnicianCommented:
For example : $("p", "div").next("ul").css( "margin-top", "-13px" );

Test page : http://jsfiddle.net/94sFf/
0
 
jeremyllAuthor Commented:
You guys are Legendary!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.