What is the most economical way to write this code?
<code>.colHeaders div:nth-child(2),
.colHeaders div:nth-child(3),
.colHeaders div:nth-child(4),
.colHeaders div:nth-child(11),
.colHeaders div:nth-child(12),
.colHeaders div:nth-child(14),
.colHeaders div:nth-child(15),
.colHeaders div:nth-child(16) {background: lightgrey;}
</code>
<code>.colHeaders div:nth-child(2),
.colHeaders div:nth-child(3),
.colHeaders div:nth-child(4),
.colHeaders div:nth-child(11),
.colHeaders div:nth-child(12),
.colHeaders div:nth-child(14),
.colHeaders div:nth-child(15),
.colHeaders div:nth-child(16) {background: lightgrey;}
</code>
.colHeaders div:nth-child(2),
.colHeaders div:nth-child(3),
.colHeaders div:nth-child(4),
.colHeaders div:nth-child(11),
.colHeaders div:nth-child(12),
.colHeaders div:nth-child(14),
.colHeaders div:nth-child(15),
.colHeaders div:nth-child(16) {background: lightgrey;}
And why can I tell nth-child to skip children at the start, but not the end, of my parent element?
For example:
.colHeaders div:nth-child (2,3,4,11,12,14,15,16) {background: lightgrey;}
.colHeaders div:nth-child (2-4,11-12,14-16) {background: lightgrey;}
<code>.colHeaders div:nth-child (n+2,4) {background: lightgrey;}
.colHeaders div:nth-child (n+11,12) {background: lightgrey;}
.colHeaders div:nth-child (n+14,16) {background: lightgrey;}
</code>
<code>.colHeaders div:nth-child (n+2,4) {background: lightgrey;}
.colHeaders div:nth-child (n+11,12) {background: lightgrey;}
.colHeaders div:nth-child (n+14,16) {background: lightgrey;}
</code>
.colHeaders div:nth-child (n+2,4) {background: lightgrey;}
.colHeaders div:nth-child (n+11,12) {background: lightgrey;}
.colHeaders div:nth-child (n+14,16) {background: lightgrey;}