I want to style eg. h1 inside an element except

HTML-CSS
1

Except h1 inside sibling element.

More context:

Following are the structure of the HTML:

carbon-2
carbon-21024×674 47.5 KB

Content of rteContent is generated by rich text editor and it has some limitation such as assigning class or adding data- or any other attribute.

While rteContent__ignoreHeaderStyling is injected by backend.

I tried .rteContent :not(.rteContent__ignoreHeaderStyling) h1 but it styled <h1> inside rteContent__ignoreHeaderStyling. I want to style any <h1> inside rteContent but not rteContent__ignoreHeaderStyling.

I could be wrong/confused but please correct me. Please help. Thanks in advanced.

2

If you want to style only the h1 inside .rteContent , you can create a class only for that h1 and call the class for styling so that other h1 inside .rteContent__ignoreHeaderStyling won’t get affected

3

Thanks for your feedback. Problem is that the content is generated by rich text editor and it does not allow to add class inside any element.

While div.rteContent__ignoreHeaderStyling is injected by backend before it get rendered out on browser.

4

Which rich text editor are you using.?

5

I’m using Redactor 10.2.5

6

You can do one thing, change the second h1 element to h2, one important note is you should only use one h1 element per page based on SEO standards, it will confuse the search engine crawler. It will create negative ranking in keywords.

Look at this Doc,
https://www.w3.org/wiki/HTML/Usage/Headings/h1only

You can change the second h1 to h2.