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
Post a Comment