Help! I'm struggling to create a complex CSS3 selector. I want to target the second div within a child div of an item. Here is the HTML code for my test:
<!DOCTYPE html>
<html>
<head>
<style>
div.main > div:nth-child(3) {
display: none;
}
</style>
</head>
<body>
<div class="main">
-> 1-level
<div>
-----> 2-level
<div>--------> 3-level BAR</div>
<div>--------> 3-level FOO</div>
</div>
</div>
</body>
</html>
I'm trying to select the 3rd level element with the text "FOO", but I can't add another class other than ".main". I've attempted to use 'div.main > div:nth-child(3)' without any luck. You can see my code in action on this JSFiddle link.