How to prevent specific child element to be affected by href-CodePudding

I want when clicked on the child facebook do something else instead of href to the a tag, I want to do this using html and css only

<a href="www.google.com">
  
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>
  <p>I don't want facebook</p>
  
</a>

CodePudding user response：

You can put it outside of your a tag then you can always put a separate a tag in each of the element where you want them to link. Let me know if this is what you mean.

<h1><a href="www.facebook.com">When you click, facebook will open</a></h1>
  <h1><a href="www.facebook.com">When you click, facebook will open</a></h1>
  <h1><a href="www.facebook.com">When you click, facebook will open</a></h1>
  

  <p>I don't want facebook</p>

CodePudding user response：

Something like this?

<a href="www.google.com">
  
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>
</a>
<p>I don't want facebook</p>

CodePudding user response：

Not sure what you're intent overall is, but you could just move the child outside of the first <a> tag and give it its own tag and link instead.

<a href="www.google.com">
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>
  <h1>When you click, facebook will open</h1>  
</a>

<a href="www.bing.com">
  <h1>When you click, bing will open</h1>
</a>