Home › Forums › CSS › Different nth-child properties in different media queries › Re: Different nth-child properties in different media queries
September 2, 2012 at 9:37 am
#108915
Taufik NurrohmanParticipant
Have you tried to reset it first?
@media only screen and (min-width : 1350px) and (max-width: 1549px) {
li.item:nth-child(n+6),
li.item:nth-child(n+7),
li.item:nth-child(n+8) {border:none;} /* reset first */
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+6),
li.item:nth-child(n+7),
li.item:nth-child(n+8) {border:none;} /* reset first */
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+6),
li.item:nth-child(n+7),
li.item:nth-child(n+8) {border:none;} /* reset first */
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: blue;
}
}