<p dir="auto">Hello, folks.</p>
<p dir="auto">Version 3.0.3 of bootstrap.css has ineffective rules for striped tables which have rows with .danger or other contextual class(es), if <em>tbody</em> is used</p>
<p dir="auto">Given a table with the following structure...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;table class=&quot;table table-striped table-hover&quot;&gt;
    &lt;tbody&gt;
        &lt;tr class=&quot;danger&quot;&gt;
            &lt;td&gt;Row 1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class=&quot;danger&quot;&gt;
            &lt;td&gt;Row 2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class=&quot;danger&quot;&gt;
            &lt;td&gt;Row 3&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;"><pre class="notranslate"><code class="notranslate">&lt;table class="table table-striped table-hover"&gt;
    &lt;tbody&gt;
        &lt;tr class="danger"&gt;
            &lt;td&gt;Row 1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="danger"&gt;
            &lt;td&gt;Row 2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="danger"&gt;
            &lt;td&gt;Row 3&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre></div>
<p dir="auto">...only Row 2 gets emphasized with the <em>.danger</em> contextual class rules. On hovering these rows, the normal emphasis returns, including the darker color on the shaded rows.</p>
<p dir="auto">In dist, the rule for <em>table-striped</em> in bootstrap.css : 1712 overrides the rule in bootstrap : 1770, because the former contains a <em>tbody</em> selector node, which determines the rule to be sharper than the latter, where this node is missing.</p>
<p dir="auto">This bug has probably been introduced with the super-specific rules for .table-striped class in <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/twbs/bootstrap/commit/224296f6950ce0e5b00ba88aacf54fe4c638f14a/hovercard" href="https://github.com/twbs/bootstrap/commit/224296f6950ce0e5b00ba88aacf54fe4c638f14a"><tt>224296f</tt></a>/less/tables.less, purposed to fix <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="12027468" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/7281" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/7281/hovercard" href="https://github.com/twbs/bootstrap/issues/7281">#7281</a>.</p>
<p dir="auto">i have table with class .table-striped. it has 3 rows with tr.danger. only the middle one is red, the other two are default color.</p>
<p dir="auto">when i remove .table-striped, it works correctly</p>