How to style the last element before another specific element in CSS?

Question

So I would like to achieve this in CSS only, since I know how simply it is to do in jQuery.

Basically, I have a long list of p and h4 elements, and I would like to style every last p element before the next h4. For example:

<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

In that list, every last p needs to be styled before the following h4.

The amount of p and h4 tags on the page is always random.

Is something like this achieveable with CSS alone?

yes but you need to add class names. with out that it seems not possible to me.. — Mr_Green, Mar 19 '14 at 04:27
That question asks for siblings, mine is asking for the last element after another element. Completely different questions. For example, that will not find the very last `p` tag. — Fizzix, Mar 19 '14 at 05:03
`last element after another element === previous sibling` am I wrong? they sound same to me honestly.. — Mr_Green, Mar 19 '14 at 05:05
Then explain to me, in reference to the example in my original question, how would the last `p` tag be styled if it does not have a `h4` tag after it to be the sibling of? They are completely different questions... — Fizzix, Mar 19 '14 at 05:16
you were saying: "*last element after **another element***" now you are saying different. anyway, you can use `:last-child` pseudo class. — Mr_Green, Mar 19 '14 at 05:20
`last-child` of what though? Can't do the `last-child` of `h4` since they are not children of `h4`. All the code I posted within my example is within the same container... — Fizzix, Mar 19 '14 at 05:35
no, I am saying something like this `p:nth-child(4), p:nth-child(7), p:last-child`.. but still mentioning the container would be good in this case. or else just adding a class to those elements in HTML or dynamically as shown by Rohit in below posts. — Mr_Green, Mar 19 '14 at 05:41
The main thing is, the elements are dynamically created upon page load. The amount of them is completely random and using `nth-child` just wouldn't work since there is no way to determine what number it is. It is now obvious that jQuery would be the only way, unfortunately. — Fizzix, Mar 19 '14 at 05:52

score 2 · Accepted Answer · answered Mar 19 '14 at 04:27

Is something like this achieveable with CSS alone?

Not yet.

If the subject selector gets implemented, then you'd be able to use:

!p + h4 {
    ...
}

However that specification is still in an early draft state, so implementation is a ways off. You'd be better off using classes for the time being.

score 1 · Answer 2 · edited Mar 19 '14 at 05:57

1

Use jQuery

$(document).ready(function(){
    $('h4').prev('p').addClass('redCss'); // used to .prev and .next according to your requirement 
})

With this class

.redCss{

    color:red;
    font-size:14px;
    font-weight:bold;
}

Demo

more about in .prev

more about in .next

more about in addClass

edited Mar 19 '14 at 05:57

Fizzix

23,679
38
110
176

answered Mar 19 '14 at 04:27

Rohit Azad Malik

31,410
17
69
97

1

This question isn't tagged javascript or jQuery, however since CSS won't work _vanilla js_ should be allowed. – bjb568 Mar 19 '14 at 05:54

score 1 · Answer 3 · answered Mar 19 '14 at 04:43

You can use :nth-child pseudo class (would be better to use if you know the pattern of repetition).

CSS

p:nth-child(4), p:nth-child(7){
    color: red;
}

Working Fiddle

or else

Adding a class to each p element which is just before h4 element is also a good approach.

How to style the last element before another specific element in CSS?

3 Answers3

Linked