Targeting all last (but not last-most) elements of a given tag

Question

I have an HTML structure with three structures of some element and two p's right under:

<some_tag></some_tag>
<p></p>
<p></p>

<some_tag></some_tag>
<p></p>
<p></p>

<some_tag></some_tag>
<p></p>
<p></p>

In practice I have much more than just three structures (more like thirty) so I need automation.

I need to select each last p in the first two structures, but not the last p in the last structure.

My problem

There seem to be no CSS way to do the selection I desire.

Considering an HTML way of wrapping each non-last, some_tag structure in some other element (like a div) I conclude I don't like this solution as it seems to me unaesthetic.

My question

Do you know a way to automate the described selection via JavaScript?

Answer 1

This is not a good HTML structure for what you want to do. It will be much easier if you wrap each set of hX and p inside a container tag like a div.

Otherwise you are going to have to loop over each element with JavaScript and decide whether to apply styles (if the current element is a p, and there is a next element, and it's not a p).

Answer 2

Is your layout created dynamically? You could always use css classes to handle this easily. If you are not able to control this with layout here is a quick way to do it:

#myLayout *:not(:last-child) > p:last-child {
  color: red
}

This code grabs every parent with a p child. It should ignore the last child sibling and always grab the last p. I would recommend replacing the * with a node or a css selector though to prevent unexpected results. I also recommend at least limiting possible issues by enclosing everything in a container like below.

<div id="myLayout">
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
</div>

Answer 3

You can do this with JavaScript, here is an example:

const elements = document.querySelectorAll("*");
let latestParagraph;
const paragraphsToStyle = [];

for(const element of elements){
  if(element.tagName === "P"){
    latestParagraph = element;
  }else{
    if(latestParagraph){
      paragraphsToStyle.push(latestParagraph);
    }
  }
}

paragraphsToStyle.pop();

for(const paragraph of paragraphsToStyle){
  paragraph.style.color = "red";
}

<h3>h</h2>
<p>p1</p>
<p>p2</p>
<h2>h</h2>
<p>p3</p>
<p>p4</p>
<h1>h</h2>
<p>p5</p>
<p>p6</p>

This will only work if there is no nesting.

The script runs through all the elements on the page and when a non paragraph element is encountered, it adds the latest paragraph found to the paragraphsToStyle array. At the end of the first loop, the last paragraph on the page is removed from the array paragraphsToStyle.pop()

Answer 4

Edit: As others have mentioned, you may want to restructure your HTML so that it can work with selectors more easily. But if that's not possible, you can use JavaScript for this. In this case, all you have to do is see if the element is a 'p' tag and if the next element is not a 'p' tag:

var children = document.getElementById('content').children;
for (let i = 0; i < children.length - 1; i++) {
  let nextTagName = children[i+1].tagName;
  if (children[i].tagName === 'P' && nextTagName !=='P') {
      children[i].classList.add('selected');
  }
}

.selected {
  color: aqua;
}

<div id="content">
    <h2>Heading 1</h2>
    <p>p 1</p>
    <p>p 2</p>
    <h3>Heading 2</h3>
    <p>p 3</p>
    <p>p 4</p>
    <h4>Heading 3</h4>
    <p>p 5</p>
    <p>p 6</p>
</div>