Home › Forums › CSS › Different nth-child properties in different media queries › Re: Different nth-child properties in different media queries
September 2, 2012 at 8:58 am
#108909
wolfcry911Participant
Its because at wider viewport sizes, 1600px for instance, the first media query still holds true. At 1600px the n+6 and the n+7 should have a top border. I think you may be looking for something like this:
@media only screen and (min-width : 1350px) and (max-width: 1549px) {
li.item:nth-child(n+6) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: red;
}
}
@media only screen and (min-width : 1550px) and (max-width: 1749px) {
li.item:nth-child(n+7) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: green;
}
}
@media only screen and (min-width : 1750px) {
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: blue;
}
}