<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<p>Category 3 SHOULD be selected; Category 7 should NOT be selected.</p>
<section>
<div class="c">Category 1</div>
<div class="c">Category 2</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 3</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 4</div>
<div class="c">Category 5</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 6</div>
<div class="c">Category 7</div>
<div class="c">Category 8</div>
<div class="p">product</div>
<div class="c">Category 9</div>
</section>
</body>
</html>
// Code goes here
div {
padding: 5px;
margin-bottom: 5px;
}
/*:nth-child(n+2) {
color: #600b90;
border: 1px dashed red;
background: orange;
}*/
.c {
color: yellow;
background: blue;
opacity:.1;
}
.c+.c {
opacity:1;
}
.p+.c {
color: yellow;
background: blue;
}
.c:last-child { /* orphan cat on end of list */
opacity:.1;
}
/*ul li:not(:nth-child(n+3))
Which would select all lis before the 3rd (e.g. 1st and 2nd). But, in my opinion this looks ugly and has a very tight usecase.
You also could select the nth-child right-to-left:
ul li:nth-child(-n+2)*/