[Resolved] Add top-border to h3, except the first

[Max]

Hi there!

Is there a way to add a top-border to all h3’s in a blog post, except for the first h3 underneath every h2?

Example;

H2
H3
H3 - has top border
H3 - has top border
H3 - has top border
H2
H3
H3 - has top border
H2
H3
H2
H3
H3 - has top border
H3 - has top border

I’m doing that manually now every time, but would be great if there’s a way to do it automatically.

Thanks!

[Fernando]

Hi Max,

Yes, there’s a way.

Try adding this through Appearance > Customize > Additional CSS:

.single-post h3:not(h2 + h3){
    padding-top: 40px !important; 
}

This should add padding only to H3s not directly after an H2.

[Max]

Thanks for the code Fernando!

I’ve implemented it, but it doesn’t seem to work.

it’s also adding a border to the first h3 of the h2.

See: https://jmp.sh/1Sz5Oloy

Code I used:

<style>
.single-post h3:not(h2 + h3){
    border-top: 1px solid black !important; 
}
</style>

Any ideas?

[David]

Hi there,

that won’t work – the direct sibling combinator ie. h2 + h3 only applies if the H3 element comes immediately after the H2 element in the DOM.
And the alternative descendent sibling combinator ( eg. h2 ~ h3 ) won’t work either as all the H3s are in the same container.

Options:

A. Add a class to the first H3 that you can use to clear the styles.

B. Split the page into Sections, by moving the H2 and its related H3 content inside a GB Container Block. Then set the HTML tag for that Container Block to section

Then you can then do:

section h3:not(:first-of-type) {
    /* your style properties */
}

[Max]

Ok, thanks for the input!

I want it to be as handsfree as possible, without having to create sections or add classes when I’m writing an article.

Different approach:

Would it somehow be possible to add a border-top to all h3, except for the ones that comes directly after the class chapter-block?

[Max]

Figured it out based on the example earlier:

.single-post h3:not(.chapter-block + h3){
    border-top: 2px solid black;
		padding-top:0.7em;
}

Every h3 gets a border at the top now, except the ones immediately underneath class chapter-block.

Thanks again! Much appreciated.

[David]

Yep that will work, as long as they’re adjacent 🙂

Glad to see you got that working!!

[Author]

Posts