css - Bootstrapc3 : Overriding row left and right margins -
trying override row class's default left , right margins
.row .row { margin-right: -15px; margin-left: -15px; }
page has multiple rows
like
html
<div class="row row-padded" id="question1"></div> <div class="row row-padded" id="question2"></div> <div class="row row-padded" id="question3"></div>
css
.row-padded { margin-top:15px; padding-left:25px; padding-top:10px; padding-bottom:10px; }
it works fine if overide id
. works fine 1 row
#question1 { margin-left:0px; margin-right:0px; }
but not
div[id^='question'] { margin-left:0px; margin-right:0px; }
you need understand how specificity works. reason div[id^='question']
doesn't override .row .row
because has 1 element , 1 attribute selector (considered same specificity class) while latter has 2 class selectors - classes override regular elements in specificity, makes sense 2 classes combined has more priority 1 class , 1 element. remember id overrides both class , element selectors.
if want second selector work, try:
div.row[id^='question'] { margin-left: 0px; margin-right: 0px; }
Comments
Post a Comment