Html Question posted in
Some basic documentation can be found here.

Html – 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.

CSS:

#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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This works:

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

    Thanks @C3roe for answering in comments.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search