Menu
Sorry about the very generic post title. But what I'm after here is this:
<div id="my-div">
<span>
<a href="#">link 1</a>
<a href="#">link 2</a>
</span>
<a href="#">link 3</a>
</div>
How would I select 'link 3' in CSS? Without editing that Html there at all. This is the html that presented with and I need to select link 3 without selecting link 1 and 2.
Any ideas?
What you posted literally means "Find any a that are inside of div#my-div and are the direct child of their parent."
Use
div#my-div > a
Using the > changes the description to: "Find any a that are the direct descendents of div#my-div" which is what you want.
137
Use the following CSS selector:
div>a
or
#my-div>a
This will select any a that is a direct descendant of a div, or the element with ID "my-div" (whichever is most appropriate to you).
E.g.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div>a
{
color:Red;
}
#my-div>a
{
color:Blue;
}
</style>
</head>
<body>
<div id="my-div">
<span>
<a href="#">link 1</a>
<a href="#">link 2</a>
</span>
<a href="#">link 3 (this will be blue as per CSS)</a>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
