I have a stylesheet which indents paragraphs by 20px, but I do not want an indent on the first paragraph after each H4.

So I have something like this:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h4>Sub Heading</h4>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

Using jquery I want to override the css on Paragraph 3 so there is no text-indent.

I tried this but nothing happened:

$("#myDiv > h4").next("p").css({"text-indent":0});

I have a stylesheet which indents paragraphs by 20px, but I do not want an indent on the first paragraph after each H4.

So I have something like this:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h4>Sub Heading</h4>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

Using jquery I want to override the css on Paragraph 3 so there is no text-indent.

I tried this but nothing happened:

$("#myDiv > h4").next("p").css({"text-indent":0});

• javascript
• jquery
• css

5 Answers 5

You can do this with just CSS:

#myDiv > h4 + p {
    text-indent: 0;
}

That selector means: select p preceded by h4 that is a child of #myDiv.

+ is the adjacent sibling selector.

Or as JavaScript if you prefer:

$('#myDiv > h4 + p').css('text-indent', 0);

What about this?

Use h4 + p as your selector.

many ways are there...

$(document).ready(function(){
    $('#myDiv h4').each(function(){
    $(this).next().css({"text-indent":0});
    });
});

DEMO

$('#myDiv h4').next('p').css({textIndent:0});

$("#myDiv > h4:first-child")css({"text-indent":0});

http://api.jquery./first-child-selector/