Multiple class selectors not applying a property

Question

So, my last question was voted, so I will try to be more specific with this.

I am trying to create a responsive mesh structure using css . I want:

should be normalized - I will use normalize css
Flex Box Support
Has backward compatibility for most browsers

and I made 4 classes of imp:

row : using it as wrapper( width:100% ) for my columns. col-x : x=(1-12) width 100% at small , and width 100*x/12 at medium and large. col-mx : x=(1-12) width 100*x/12 at medium , and is defined at medium only. col-lx : x=(1-12) width 100*x/12 at large , and is defined at large only. 

I defined col for m and l so that I can combine multiple width fields in separate resolutions. For example, here is the html:

 <div class="row header"> <div class="col-2 col-m-4 col-l-1 spoons"></div> <div class="col-2 col-m-1 col-l-3 spoons"></div> <div class="col-2 col-m-1 col-l-1 spoons"></div> <div class="col-2 col-m-1 col-l-2 spoons"></div> <div class="col-2 col-m-1 col-l-2 spoons"></div> <div class="col-2 col-m-4 col-l-3 spoons"></div> </div> 

According to the above html snippet, the first inner line should be 2 in small, 4 in average and 1 in large screen size.

Problem:

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* Rows and clearfix */ .row:after { content: " "; display: table; clear: both; } .row { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* Columns */ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; width: 100%; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 2px; } /* Or I can do [class^='col-'] { float: left; } */ /* Columns */ .hide { display: none; } .r-img { max-width: 100%; height: auto; display: block; } @media screen and (min-width: 48em) { /* mid devices*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-1, .col-m-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-2, .col-m-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-3, .col-m-3 { width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-4, .col-m-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-5, .col-m-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-6, .col-m-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-7, .col-m-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-8, .col-m-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-9, .col-m-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-10, .col-m-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-11, .col-m-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-12, .col-m-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .hide-m { display: none; } } @media screen and (min-width: 64em) { /* lg devices */ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-l-1, .col-l-2, .col-l-3, .col-l-4, .col-l-5, .col-l-6, .col-l-7, .col-l-8, .col-l-9, .col-l-10, .col-l-11, .col-l-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-1, .col-l-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-2, .col-l-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-3, .col-l-3 { width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-4, .col-l-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-5, .col-l-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-6, .col-l-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-7, .col-l-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-8, .col-l-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-9, .col-l-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-10, .col-l-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-11, .col-l-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-12, .col-l-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .hide-l { display: none; } } .header { border: 1px solid #f52b63; background: #e6ae27; } .spoons { border: 1px solid #2b90f5; background: #3ad4b5; height: 100px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" /> <div class="row header"> <div class="col-2 col-m-4 col-l-1 spoons"></div> <div class="col-2 col-m-1 col-l-3 spoons"></div> <div class="col-2 col-m-1 col-l-1 spoons"></div> <div class="col-2 col-m-1 col-l-2 spoons"></div> <div class="col-2 col-m-1 col-l-2 spoons"></div> <div class="col-2 col-m-4 col-l-3 spoons"></div> </div> 

The above code snippet contains all the code and should work fine, but it is not. The problem is that all divs inside the row class do not get the style according to the classes specified in different resolutions. Infact they are collected at random, for example, the 1st div in the style with col-2, the second - in order, the 3rd - only one class. I want them to follow normal behavior that overrides class properties when defining multiple classes.

Here is a screenshot of the Inspect Element dialog box from Firefox that talks about the above situation.

Answer 1

I solved this one more day, and the main cause of the problem was the way I declared classes in media queries. col-x classes were first declared as follows:

 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,...{...} 

and then again declared media queries for medium and large screens.

 .col-2.col-m-2{....} 

This caused them to override previous CSS rules in some scenarios because col-x was defined again.

The correct way to do this would be as follows:

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* Rows and clearfix */ .row:after { content: " "; display: table; clear: both; } .row { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* Columns */ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; width: 100%; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 2px; } .col-nr-1, .col-nr-2, .col-nr-3, .col-nr-4, .col-nr-5, .col-nr-6, .col-nr-7, .col-nr-8, .col-nr-9, .col-nr-10, .col-nr-11, .col-nr-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-nr-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-nr-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-nr-3 { width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-nr-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-nr-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-nr-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-nr-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-nr-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-nr-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-nr-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-nr-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-nr-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } /* Or I can do [class^='col-'] { float: left; } */ /* Columns */ .hide { display: none; } .r-img { max-width: 100%; height: auto; display: block; } @media screen and (min-width: 48em) { /* mid devices*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-3{ width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .col-m-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-m-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-m-3 { width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-m-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-m-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-m-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-m-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-m-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-m-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-m-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-m-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-m-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .hide-m { display: none; } } @media screen and (min-width: 64em) { /* lg devices */ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-l-1, .col-l-2, .col-l-3, .col-l-4, .col-l-5, .col-l-6, .col-l-7, .col-l-8, .col-l-9, .col-l-10, .col-l-11, .col-l-12 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; padding: 0; } .col-1{ width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-3{ width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-5{ width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-6{ width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-8{ width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-9{ width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-10{ width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-11{ width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .col-l-1 { width: 8.3333%; -webkit-flex: 1 1 8.3333%; -ms-flex: 1 1 8.3333%; flex: 1 1 8.3333%; } .col-l-2 { width: 16.6666%; -webkit-flex: 1 1 16.6666%; -ms-flex: 1 1 16.6666%; flex: 1 1 16.6666%; } .col-l-3 { width: 25%; -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; } .col-l-4 { width: 33.3333%; -webkit-flex: 1 1 33.3333%; -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .col-l-5 { width: 41.6666%; -webkit-flex: 1 1 41.6666%; -ms-flex: 1 1 41.6666%; flex: 1 1 41.6666%; } .col-l-6 { width: 50%; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } .col-l-7 { width: 58.3333%; -webkit-flex: 1 1 58.3333%; -ms-flex: 1 1 58.3333%; flex: 1 1 58.3333%; } .col-l-8 { width: 66.6666%; -webkit-flex: 1 1 66.6666%; -ms-flex: 1 1 66.6666%; flex: 1 1 66.6666%; } .col-l-9 { width: 75%; -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; } .col-l-10 { width: 83.3333%; -webkit-flex: 1 1 83.3333%; -ms-flex: 1 1 83.3333%; flex: 1 1 83.3333%; } .col-l-11 { width: 91.6666%; -webkit-flex: 1 1 91.6666%; -ms-flex: 1 1 91.6666%; flex: 1 1 91.6666%; } .col-l-12 { width: 100%; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .hide-l { display: none; } } 

Answer 2

The problem is that you define col-x after certain classes of media queries.

In your example; "col-l-1" is declared first, then inside the same block of media queries you have ".col-2", which then overrides the "large" version of the column.

It’s best to put all the base classes in a non-width media query, as shown below, and then add middle and large grid classes to you, which will override the default classes when the minimum width is reached:

 @media only screen { .small-1 { width: 8.33333%; } .small-2 { width: 16.66667%; } // and so on } // then add you width-specific media queries