Thank you. I am going to read and study the spec.
>Here's the full spec :
http://www.w3.org/TR/CSS2/cascade.html>-but Thierry summed it up very well.
>
>FWIW If you had used an identical selector you would win if it came later.
>
>>Thierry, I wanted to thank you again for the reference and explanation about Specificity of selectors. Honestly, this is the first time I have read/heard about it. Good information to know.
>>
>>But I was wondering, in your opinion, do you think Bootstrap designer(s) deliberately "build" up their selector Number so that their rule "wins" most of the time?
>>
>>
>>>Selector specificity
>>>
http://www.w3.org/TR/css3-selectors/#specificity>>>
>>> count the number of ID selectors in the selector (= a)
>>> count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
>>> count the number of type selectors and pseudo-elements in the selector (= c)
>>>Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
>>>
>>>Applied to your case:
>>>
>>>Bootstrap
>>>.table>tbody>tr>td
>>>
>>>a=0
>>>b=1 (.table)
>>>c=3 (tbody, tr, td)
>>>s=13
>>>
>>>You
>>>table.my_table td
>>>
>>>a=0
>>>b=1 (.my_table)
>>>c=2 (table, td)
>>>s=12
>>>
>>>Bootstrap wins over You!
>>>
>>>You should win using:
>>>
>>>table.table.my_table tr td
>>>
>>>s=23
>>>>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