Overriding css rule

Hi everyone, the following 2 rules are in an external css file:

div[class^=col-] {
    margin-bottom: 20px
}

@media screen and (min-width: 992px) {
    div[class^=col-] {
        margin-bottom: 0
    }
}

If I’m reading it correctly, the media query is zeroing out the bottom margin on all elements with a class of .col for browser sizes 992px and larger and the first rule is adding the 20pixels for browsers 992px and smaller.

I’m trying to zero out the bottom margin for browsers sizes less then 992px on a specific div with a class of “date” so I created a separate media query:

@media screen and (max-width: 992px) {
    .date {
        margin-bottom: 0;
    }
}

As the rule isn’t applying, I just wondered if anyone could tell me what I might be doing wrong? Is the first media query mentioned above more specific than the above one I’m trying to overwrite it with?

Would really appreciate any advice.

Hi,
You could try add specificity to the selector if it has more class names, as it seems it already has:

@media screen and (max-width: 992px) {
    div[class^=col-].date { /* no space before the other class name */        margin-bottom: 0;
    }
}

In case it doesn’t have another class name, adding the element name would equal the specificity and as the later coming rule it should override the former.
(div.date equals the div[class^=col-] )

Thanks so much - that worked really well. I have to target a second class “author” but I could only do this with a separate rule. Is there a way to combine the rule so that it targets both the date and author classes?

The usual way is to set all properties that is the same for several targets in one common rule-block and then adjust properties that differs for some of them in separate rule-blocks for those targets.

The advantage by this is lesser code and a better overview of common and individual properties.

As you say, some targets needs to have their own rule-blocks to override some of the declarations in the common rule-block.

Ok thanks again for the advice - much appreciated.

Sorry to come back to this but I just have a related question. I’m trying to override some bootstrap rules but not sure how to switch off the following ones:

.col-7 {
     flex: 0 0 58.333333%; 
     max-width: 58.333333%; 
}

Would the rules just be:

flex: none

and

max-width: none

Thanks again.

I think that should work, but I’m no Bootstrap fan myself so there might be better ways that’s not overwritten by the next update. :slightly_smiling_face:

Yeah it would be good to future-proof the code if anyone could give me advice.

1 Like

Never directly change the bootstrap classes because that will break the grid. You can of course override the bootstrap classes using your own class to carry the new changes.

1 Like

Thanks for the advice - I’ll make sure I apply new classes.