Presented here is a snippet of HTML/CSS code featuring two URLs:
- The first URL (Google) is a direct child of the div.
- The second URL (Bing) is simply a descendant of the div.
Using the child-selector should result in only the Google URL being styled in red.
However, upon implementation, both the Google and Bing URLs end up being displayed in red. Surprisingly, when the <h1>Text</h1> element is removed, only the Google URL appears in red.
What could be causing this discrepancy?
Here's a glimpse at the HTML segment:
<div class="mydiv">
<a href="http://www.google.com">Google</a>
<p>
<h1>Text</h1>
<a href="http://www.bing.com">Bing</a>
</p>
</div>
As for the corresponding CSS excerpt:
.mydiv > a {
color:red;
}