- This topic has 6 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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 borderI’m doing that manually now every time, but would be great if there’s a way to do it automatically.
Thanks!
Customer Support
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.
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.
Code I used:
<style> .single-post h3:not(h2 + h3){ border-top: 1px solid black !important; } </style>Any ideas?
Customer Support
Hi there,
that won’t work – the direct sibling combinator ie.
h2 + h3only 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
sectionThen you can then do:
section h3:not(:first-of-type) { /* your style properties */ }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-topto all h3, except for the ones that comes directly after the classchapter-block?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.
Yep that will work, as long as they’re adjacent 🙂
Glad to see you got that working!!
- You must be logged in to reply to this topic.
