You cannot apply Contextual Classes to override Table Header Colors Classes like .thead-dark or .thead-light

Question

You cannot apply Contextual Classes to override Table Header Colors Classes like .thead-dark or .thead-light

I am currently learning about tables in Bootstrap 4. I am facing an issue where the background-color in the table-light class is not being applied. I suspect this might be due to the thead-dark class taking precedence over it. Could you please clarify why thead-dark takes priority over table-light? If my assumption is incorrect, I would appreciate an explanation regarding the actual reason.

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<div class="container">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th class="table-light">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7115141731021e1c141c10181d5f121e1c">[email protected]</a></td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87ede8e2c7e2ffe6eaf7ebe2a9e4e8ea">[email protected]</a></td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b3b6b1b799bca1b8b4a9b5bcf7bab6b4">[email protected]</a></td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="167b77646f56736e777b667a733875797b">[email protected]</a></td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7ddc2dbcef7d2cfd6dac7dbd299d4d8da">[email protected]</a></td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818ca3869b828e938f86cd808c8e">[email protected]</a></td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afceccdbefcad7cec2dfc3ca81ccc0c2">[email protected]</a></td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b485e587b5e435a564b575e15585456">[email protected]</a></td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8d828b8589ac89948d819c8089c28f8381">[email protected]</a></td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9e6c3dec7cbd6cac388c5c9cb">[email protected]</a></td>
      </tr>
    </tbody>
  </table>
</div>
</body> <!-- source: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp -->

Issue:

https://i.sstatic.net/dNLO0.png

html css bootstrap-4

Answer 1

Answer №1

This is the definition of .thead-light found in the Bootstrap stylesheet.

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

It specifically targets th elements that are children of an element with the class thead-light.

When you assign the class to a th element, like so:

<th class="table-light">Firstname</th>

You must target it using:

th.thead-light {
   /* CSS */
}

If not, the specificity of .table-dark > th will take precedence over <th class="table-light">

.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
  background-color: #c6c8ca;
}

Answer 2

This is the definition of .thead-light found in the Bootstrap stylesheet.

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

It specifically targets th elements that are children of an element with the class thead-light.

When you assign the class to a th element, like so:

<th class="table-light">Firstname</th>

You must target it using:

th.thead-light {
   /* CSS */
}

If not, the specificity of .table-dark > th will take precedence over <th class="table-light">

.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
  background-color: #c6c8ca;
}

Answer 3

Answer №2

The rule found in bootstrap.css is quite interesting. It states:

.table .thead-dark th {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
}

Surprisingly, this rule is positioned after another rule:

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

Perhaps the most crucial aspect:

When utilizing the CSS Specificity Calculator to compare th.table-light (the actual usage) with .table .thead-dark th, it becomes evident that the latter carries greater specificity and therefore takes precedence.

To sum it up:

For a CSS rule to triumph in specificity (and thus take control), it must either possess higher specificity than a rival CSS rule OR, in the case where specificity levels are equal (as seen here), it should be listed after the conflicting rule.

Keep in mind:

While some may recommend using the !important declaration for a quick fix, it should only serve as a temporary solution. Establishing it as a permanent fixture could lead to maintenance nightmares.

Answer 4

The rule found in bootstrap.css is quite interesting. It states:

.table .thead-dark th {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
}

Surprisingly, this rule is positioned after another rule:

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

Perhaps the most crucial aspect:

When utilizing the CSS Specificity Calculator to compare th.table-light (the actual usage) with .table .thead-dark th, it becomes evident that the latter carries greater specificity and therefore takes precedence.

To sum it up:

For a CSS rule to triumph in specificity (and thus take control), it must either possess higher specificity than a rival CSS rule OR, in the case where specificity levels are equal (as seen here), it should be listed after the conflicting rule.

Keep in mind:

While some may recommend using the !important declaration for a quick fix, it should only serve as a temporary solution. Establishing it as a permanent fixture could lead to maintenance nightmares.

You cannot apply Contextual Classes to override Table Header Colors Classes like .thead-dark or .thead-light

Answer №1

Answer №2

Perhaps the most crucial aspect:

To sum it up:

Similar questions

Click the link to capture the ID and store it in a variable

styled-components: the parent's styles take precedence over the child's styles

What sets apart auto, 0, and no z-index values?

A step-by-step guide to creating a CSS menu using pure HTML markup

Using jQuery for validation using a checkbox

By increasing the background-color to 100%, the list item obstructs the background image of its parent div

The Angular CLI does not recognize any Bootstrap classes

What is the reason behind the changes in the CSS rendering behavior of Fieldset legends over the past few months?

Sort through categories using PHP and MySQL for an organized search

How can autopostback be implemented for a Multiselect ListBox in ASP?

Width of ListBox Item

What could be causing the issue of dynamic meta open graph tags not functioning properly?

The coloring of my div elements is not displaying as intended

Error: The specified module is missing an export that was requested

The calculator I designed using HTML, CSS, and JavaScript is experiencing difficulty adjusting to various screen sizes

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

Unique background image is assigned to each div sharing the same class

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

Creating a dynamic list filter using JavaScript and three select boxes