Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,206

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

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!


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#2 2019-04-24 16:41:29

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,261
Website

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

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>

Offline

#3 2019-04-24 17:17:49

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,206

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

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!


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#4 2019-04-24 18:24:43

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,196
Website

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

.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.

Offline

#5 2019-04-24 22:02:10

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,454
Website

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

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.


TXP Builders – finely-crafted code, design and txp

Offline

#6 2019-04-25 09:15:36

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,668
Website

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

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/>.

Offline

#7 2019-04-25 10:07:23

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,196
Website

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

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;
}

Offline

#8 2019-04-25 11:47:55

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,206

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

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#9 2019-04-25 12:10:55

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,454
Website

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

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');

TXP Builders – finely-crafted code, design and txp

Offline

#10 2019-04-25 12:17:48

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,206

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

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

Board footer

Powered by FluxBB