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; } 

enter image description here

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -