How to get last-child of each heading?

Question

Suppose this HTML:

<h1>heading</h1>
  <p>foo</p>
  <p>bar</p><!---this should be selected--->

<h1>heading</h1>
  <p>foo</p>
  <p>bar</p>
  <p>foo</p>
  <p>bar</p><!---this should be selected--->

And to select this only with CSS is not possible?

I was trying it like this:

h1 ~ p:last-child /*wouldn't work*/ /* it would select last-child of p*/

sorry, no. I was looking for this without modifying html something like nth-child(-1) or only-of-type() but couldn't find to work — Bhojendra Rauniyar, Mar 19 '14 at 05:48
now go to this question http://stackoverflow.com/questions/22496160/how-to-style-the-last-element-before-another-specific-element-in-css/22496198#22496198 — Rohit Azad Malik, Mar 19 '14 at 05:50

bjb568 · Accepted Answer · 2014-03-19T05:51:25.873

That is simply not possible with CSS, as there is no way to select elements backward or up the tree (looking forward to CSS4…). You will have to use one of these:

<section>
    <h1>heading</h1>
    <p>foo</p>
    <p>bar</p><!---this should be selected--->
</section>

(section p:last-child) Or:

<h1>heading</h1>
<p>foo</p>
<p class="last">bar</p><!---this should be selected--->

(p.last) Or with JS:

var e = document.getElementsByTagName('h1');
for (var i = 0; i < e.length; i++) {
    var f = e[i].nextSibling;
    while (f && f.tagName == 'P') {
        var n = f.nextSibling();
        if (!n) {
            f.classList.add('last');
        } else {
            f = n;
        }
    }
}

I'm not seeing for previous or next siblings but searching for css something like only-of-type.... — Bhojendra Rauniyar, Mar 19 '14 at 05:49

Ravi Patel · Answer 2 · 2014-03-19T06:39:45.407

0

Demo

<div class="span8">
<h1>heading</h1>
  <p>foo</p>
  <p>bar</p>
  <p>foo</p>
  <p>bar</p>
</div>    

  .span8 > p:last-child{ color:red }

edited Mar 19 '14 at 06:39

answered Mar 19 '14 at 05:53

Ravi Patel

5,121
2
25
44

score 0 · Answer 3 · answered Mar 19 '14 at 06:35

0

If you wrap the content with a div, then it is possible using CSS.

div p:last-child  {
  color:red;
}

See demo

answered Mar 19 '14 at 06:35

newTag

2,149
1
22
31

score -1 · Answer 4 · answered Mar 19 '14 at 05:50

-1

It is possible with Jquery. Here is an example

$(document).ready(function(){
    $('h1').prev('p').addClass('myclass');
})

Learn more about previous and next on this link

answered Mar 19 '14 at 05:50

Ayaz Shah

435
1
5
24

Won't get the last one. – bjb568 Mar 19 '14 at 05:53

How to get last-child of each heading?

4 Answers4