Can the CSS selector parent child:nth-child() be used to target only children?
The HTML code is as follows:
<body>
<div>div 1</div>
<div>
div 2
<div>div 2.1</div>
<div>div 2.2</div>
</div>
</body>
I attempted to style div 1 & div 2 with CSS using:
body div:nth-of-type(1) {
background: red;
color: white;
}
body div:nth-child(2) {
background: blue;
}
However, div 2.1 & 2.21 were also selected. Here is a link to the JSFiddle.
Is it possible to achieve non-recursive selection? If not, would using classes or IDs be the only solution?