- This topic is empty.
-
AuthorPosts
-
September 2, 2012 at 8:35 am #39620
sebtb
Memberi’m working with responsive design and in my css there are e.g. three different media queries with a list item style:
@media only screen and (min-width : 1350px) {
li.item:nth-child(n+6) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: red;
}
}
@media only screen and (min-width : 1550px) {
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;
}
}
So beginning with the 6th/7th/8th li item, i’m adding a top border. The problem is:
- For 1350px i got n+6
- For 1550px i got n+6
- For 1750px i got n+6
When i add another earlier nth-child property, this earlier one is set for every coming nth-child for this li item.
I added for testing some more other styles, like green, blue and red headline and these styles are working.
What’s the problem?
with best regards Sebastian
September 2, 2012 at 8:58 am #108909wolfcry911
ParticipantIts 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;
}
}September 2, 2012 at 9:05 am #108910MemberBut why h1 is changing correctly and all other styles too. Only nth-child not working perfectly? Are media queries there not cascading?
September 2, 2012 at 9:37 am #108915Taufik Nurrohman
ParticipantHave 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;
}
}September 2, 2012 at 10:36 am #108920MemberYep thanks. I added now this way:
li.item:nth-child(n+7) {
border-top: 0;
}
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
