I always thought that by placing my CSS rule after some other CSS rule, my rule rules (pun intended).
But here is a case where it does not work and I need to understand why.
I use Bootstrap.min.css
And I have my CSS (Dmitry.less which is the same as CSS)
My Dmitry.less in the header is AFTER bootstrap.
I have a rule
table.my_table td {
padding: 5px;
}
But when I inspect the td of the table the padding is 8px. So I find that right above my rule (in Chrome Developer Mode) I see the rule set by Bootstrap.css
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
And the Bootstrap padding overrules mine. When I uncheck the Bootstrap padding my padding works.
The class for the table in HTML is defined as:
<table class="table my_table"
What puzzles me is that my .CSS/LESS is after the Bootstrap.css class "table". And yet Boostrap.css is used. This is not the first place where I find this type of "strange" behavior.
What am I missing?
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham