css rule in stylesheet but not applied in browser -


i'm making grid in html:

 *,   *:after,   *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box sizing: border-box;   }   .mygrid {     margin: 0 0 20px 0;   }   &:after {     content: "";     display: table;     clear: both;   }   [class*='col-'] {     float: left;     padding-right: 20px;   }   .grid &:last-of-type {     padding-right: 0;   }   .col-1-2 {     width: 33.3%;   }   .col-2-3 {     width: 66.6%;   }   .content {     background-color: #8ab9ff;     padding: 20px;   }
<div class="mygrid">    <div class="col-1-2">      <div class="content">        <p>text text text</p>      </div>    </div>    <div class="col-2-3">      <div class="content">        <p>text text text</p>      </div>    </div>  </div>

all changes apply on document except last rule on .content. when fire document in browsers (chrome, mozilla, i.e.) , inspect element can't see color rule, can see other rules created.

as can see, boxes blue. maybe there more rules, no shown here , interfere intent. if don't see rule on debugger, simple syntax error in production document. not in example.

edit:

you should "inspect element" , lookup .content rule. if inside see background-color: #8ab9ff; rule overriding. try this.

background-color: #8ab9ff !important; 

example:

*,   *:after,   *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;   }   .mygrid {     margin: 0 0 20px 0;   }   &:after {     content: "";     display: table;     clear: both;   }   [class*='col-'] {     float: left;     padding-right: 20px;   }   .grid &:last-of-type {     padding-right: 0;   }   .col-1-2 {     width: 33.3%;   }   .col-2-3 {     width: 66.6%;   }   .content {     background-color: #8ab9ff !important;     padding: 20px;   }
<div class="mygrid">    <div class="col-1-2">      <div class="content">        <p>text text text</p>      </div>    </div>    <div class="col-2-3">      <div class="content">        <p>text text text</p>      </div>    </div>  </div>


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -