Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Different nth-child properties in different media queries

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 2, 2012 at 8:35 am #39620
    sebtb
    Member

    i’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 #108909
    wolfcry911
    Participant

    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;
    
}
    
}
    September 2, 2012 at 9:05 am #108910
    sebtb
    Member

    But 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 #108915
    Taufik Nurrohman
    Participant

    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;
    
}
    
}
    September 2, 2012 at 10:36 am #108920
    sebtb
    Member

    Yep 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;
    
}
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.