0

This question is for a WordPress website that uses a custom theme.

When I add an H2 to a blog, I noticed there is a spacing issue. I inspected the page and for some reason H2s on blog/article pages get assigned their own class (.searchresults h2).

enter image description here

This does not happen for other headings such as H1, H3, etc…

I am not sure where the “searchresults” class came from, so I don’t want to make custom changes to the “.searchresults h2” element style.

I have thought about adding a new element style to the custom css section, such as: ".searchresults single-post h2", but not sure if that is the best approach or would even work.

A user on Stack Exchange suggested using Javascript that will revert the searchresults h2 to h2.

[... document.querySelectorAll('h2.searchresults')].forEach((heading2) => {

heading2.classList.remove('searchresults');

});

Is it possible to use a function to achieve this?

Any suggestions on how to resolve this issue?

  • Most CSS comes from themes, so I would look there to see if that's where the classes are added to the HTML elements themselves. If so, you can either adjust the CSS so that the classes don't modify the look of the headings, or you can remove the classes from the elements themselves. Just be aware that changing classes may affect more than just one style - they may cascade - so you may be better off just changing/removing the CSS to not change the look of the headings. – WebElaine Jan 7 at 19:28
  • 2
    The .searchresults class is not assigned to the h2. If it was the selector would be h2.searchresults. The selector your seeing is applying that CSS to any h2 that is a child (or grandchild, or more) of .searchresults. So .searchresults could be on any parent element, up to the body. – Jacob Peattie Jan 7 at 23:59
  • Jacob Peattie - thank you for the explanation why this happens. Any suggestions on how I can resolve this issue for article/blog pages? I can create a class that mirrors the original H2 styling, and every time an H2 is added to an article page the class will need to be added to the H2, but that is not the the ideal solution. – Webman Jan 8 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.