Excluding headings inside a link

Question

I need headings in a div to be the same size/ font/ color, but I want to exclude any headings inside links. I need anything inside the div to change - Any level of nesting.

#page-container h2 {
  font-size: 20px !important;
  color: #0F1111 !important;
  font-family: Arial, sans-serif !important;
}

/*But I want to exclude any headings within links from this styling. */

<!--Example:-->
<div id="page-container">
  <h2> I want this to have styling changes</h2>
  <a> <h2> I don't want this to have styling changes because this is inside a tag </h2></a>
  <div>
    <h2> I want this to have styling changes</h2>
    <a> <h2> I don't want this to have styling changes because this is inside a tag </h2></a>
  </div>
</div>

How can I modify my CSS rule to exclude headings within 'a' tags? Changing HTML itself is not an option.

Answer 1

Like @C3roe says this code snippet works great i think. In the css code #page-container :not(a) > h2 excludes the a tags with h2

#page-container > h2,
#page-container :not(a) > h2 {
  font-size: 20px;
  color: #df1425;
  font-family: Arial, sans-serif;
}

<div id="page-container">
      <h2>I want this to have styling changes</h2>
      <a>
        <h2>
          I don't want this to have styling changes because this is inside a tag
        </h2></a
      >
      <div>
        <h2>I want this to have styling changes</h2>
        <a>
          <h2>
            I don't want this to have styling changes because this is inside a
            tag
          </h2></a
        >
      </div>