Generic override for p:last-of-type ?

[cemdev]

Okay, so I have a bit of an issue that I just don’t know how to solve (or even if it is solvable with CSS). I hope this is the right place to post this!

I need a GENERIC way to override a rule like this (as an example)

body.single p:last-of-type {
border-bottom: 1px solid #58595b;
padding-bottom: 20px;
}

Here’s the scenario. We have a platform that integrates with WordPress sites. Our clients can publish blog posts from within our platform to WordPress (via the API).

The structure of the content we output is slightly different from what the default WordPress editor outputs.

A WP blog post will typically look like:

<div>
<p>asdfasdf</p>
<p>asdjfasdf</p>
<p>aksdjfsdf</p>
</div>

So, with a structure like that – a CSS rule like the one above will display a line under the LAST p tag – usually to signify the end of the post, or as a demarcation between the post and comments – or something. I don’t think that’s great CSS – but that’s just what we’re stuck with on some themes.

A post published in our tool will look more like this:

<div> <!-- this is the entire blog post content node -->
<div someAttributes>
<p>asdjfladsf</p>
<p>askdjflasjf</p>
</div>
<div someAttributes>
<p>adjflasjdf</p>
</div>
<div someAttributes>
<p>asdfj</p>
<p>asdfj</p>
<p>asdfj</p>
</div>
</div>

The divs facilitate a number of extra features, like drag and drop in our editor.

So the CSS above will actually create 3 lines in this case – one at the bottom of the post as the theme author desired, but 2 in the middle of the post as well. (Not good).

And the rules can be anything – not just lines, but extra spacing, or removing spacing, or… well, just about anything that doesn’t belong in the middle of a blog post.

We have been handling this manually with each site that has the problem by reviewing their css and generally creating 2 rules for them to add to their stylesheet. In the case of the one above:

body.single div[somAttributes] p:last-of-type {
border-bottom: none;
padding-bottom: 0;
}

body.single div[someAttributes]:last-of-type p:last-of-type {
border-bottom: 1px solid #58595b;
padding-bottom: 20px;
}

So, my question is – is there any css solution that you can think of that would do this for us? If not – any js solution?

Or are we stuck with either manual review, or replacing the extra divs with comment blocks?

[Paulie_D]

Your first option is the simplest….just remove the rule completely.

That solves your immediate problem but, of course, leaves you with another…a way of separating out each ‘post’ from the next.

So you need some way to select the post wrapper div…assuming you can do that then the problem gets a little simpler as you can apply styling to to that div.

[Author]

Posts