htmlcsscss-selectors

Excluding headings inside a link

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.

Solution

  • This works:

    #page-container :is(h2):not(a h2)

    Thanks @C3roe for answering in comments.