[CSS] Style the last paragraphs -- special case or mental block?

uli · 2019-04-24 14:41:58

I have several blocks of always repeating elements, like

h2
p
p
p

h2
p
p

h2
p
p
p
p

The number of paragraph tags differ from block to block. Is there a css selector (combo) for targeting the last p’s in each block? Thanks!

Pat64 · 2019-04-24 16:41:29

Yep, Uli.

:nth-last-of-type(1)

But you need to use a parent container before each heading:

.my p:nth-last-of-type(1) {
	color:red
}

<div class="my">
<h2>Test</h2>
<p>Item</p>
<p>Item Last</p>
</div>
<div class="my">
<h2>Test</h2>
<p>Item</p>
<p>Item</p>
<p>Item Last</p>
</div>
<div class="my">
<h2>Test</h2>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item Last</p>
</div>

uli · 2019-04-24 17:17:49

Pat64 wrote #317755:

But you need to use a parent container before each heading:

I should have mentioned that I’m not working with Textpattern or HTML, I’m just preparing a stylesheet for somebody coding in Markdown on a smartphone, and need to make it as easy as possible to write there. So I’m trying to avoid for him typing HTML tags, using classes or re-styling tags he’ll never need. That’s the reason why I only have the h2 and p tags available. Thanks anyway, Patrick, appreciated!

philwareham · 2019-04-24 18:24:43

.my p:last-of-type is a shorter way of saying the same thing.

I think you can use this without needing to add multiple parent containers but I’m not near a computer right now to test it out:

h2 ~ p:last-of-type { ... }

You’d probably need a container around the whole thing though so other parts of site are not affected by the same rule.

jakob · 2019-04-24 22:02:10

Depending on the styling you need to apply, e.g. if it’s just padding, the most obvious way is just to style h2 instead. But if you need something more complex like added content using ::after, then that may not help.

Otherwise, if you look online for things like “css preceding selector” or “css previous sibling selector”, you’ll find a number of sometimes complex methods, some including reversing rendering direction or alternatively styling all but the last p tags.

phiw13 · 2019-04-25 09:15:36

philwareham wrote #317757:

h2 ~ p:last-of-type { ... }...

That won’t work at all. You’ll only style the very last <p/> on the page.

Jacob is right on the mark – style the <h2/> if the problem is to create some spacing or some such ( p + h2 {} .

Otherwise you’ll have to go with either Patricks solution, or add a class to that one <p/>.

philwareham · 2019-04-25 10:07:23

phiw13 wrote #317764:

That won’t work at all. You’ll only style the very last <p/> on the page.

Oh yeah, just tried it :(

One day you will be able to use the following CSS4 :has() selector to achieve this but no mainstream browser supports it yet:

.container p:has(+ h2) {
    color: red;
}
.container p:last-of-type {
    color: red;
}

uli · 2019-04-25 11:47:55

Thanks, guys!

I had some time to research now, and it looks like it’s still not possible in 2019. At least not in my working environment: There’s only a limited range of the already limited number of tags Markdown can create, the code I found for creating a class is output verbatim, I can’t use code for an HTML container (as Markdown can’t be applied inside such elements and Markdown Extra is not available for doing markdown="1" on the container tag), I can’t determine on which of the pages the CSS is applied via page specific class or ID. But worst of all: I’ve absolutely no possibility to see the source code created. That all is a pity as I’ve put hours in it to make it look as yummy and as easy to work with as it is now.

jakob · 2019-04-25 12:10:55

It’s not a solution to the original question, but can you employ javascript/jquery on the output? If so, you can add a class to the final <p> tag with something like this (with jQuery) and your hours of preparation are saved :-)

$('h2').prev('p').addClass('class-name');

uli · 2019-04-25 12:17:48

Julian, imagine, with all these limitations: yes, pure JS is possible! Though not jQ. (And all I ever coded was jQ.) Will do a research later on.

jakob · 2019-04-25 12:23:35

uli wrote #317770:

Julian, imagine, with all these limitations: yes, pure JS is possible! Though not jQ. (And all I ever coded was jQ.) Will do a research later on.

Then have a look here and here. I’ve only cursorily looked at those links but they look promising.

Pat64 · 2019-04-26 17:40:31

I tried to find a solution. The only one is to wrap each block within a div

So, in Markdown syntax:

<div markdown="0">

## Test

Item

Item Last

<div markdown="0">

## Test

Item

Item

Item Last

<div markdown="0">


## Test

Item

Item

Item

Item Last

The CSS:

h2 ~ p:nth-last-of-type(1) {
	color: red
}

Textpattern CMS

Textpattern CMS support forum

#1 2019-04-24 14:41:58