The CSS Specificity Hierarchy

Question

The CSS Specificity Hierarchy

I am currently facing a dilemma with two CSS classes in my codebase. Despite having a stronger specificity, the second class is not being chosen over the first one. Can anyone shed some light on this issue?

The CSS class that is currently being applied is -

td, th, table {   border-collapse: collapse;   border: 1px solid #999; }

Whereas, the CSS that I actually intend to use is -

  table.cancellation {     border: none;    }

I assumed that since the second class has a class selector, it would have higher specificity. Why does this assumption seem to be incorrect in practice?

css

Answer 1

Answer №1

You have adjusted the styling for the table, but not for the cells.

In the initial table, all elements are enclosed within a red border.

For the next table, the table itself is outlined in blue, however, due to the use of border-collapse:collapse, the red borders of the td and th take precedence.

The third table employs border-collapse:separate, clearly showing the blue border surrounding the table.

Finally, in the last table, the styles for td and th have been overwritten, resulting in a table without any visible borders.

th,
td,
table {
  border-collapse: collapse;
  border: 1px solid red;
  margin-bottom:1rem;// just for looks
}
table.table {
  border-color: blue
}

table.separate{
border-collapse:separate;
}

table.none,
table.none th,
table.none td{
border:none
}

<table>
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table separate">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table none">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

Answer 2

You have adjusted the styling for the table, but not for the cells.

In the initial table, all elements are enclosed within a red border.

For the next table, the table itself is outlined in blue, however, due to the use of border-collapse:collapse, the red borders of the td and th take precedence.

The third table employs border-collapse:separate, clearly showing the blue border surrounding the table.

Finally, in the last table, the styles for td and th have been overwritten, resulting in a table without any visible borders.

th,
td,
table {
  border-collapse: collapse;
  border: 1px solid red;
  margin-bottom:1rem;// just for looks
}
table.table {
  border-color: blue
}

table.separate{
border-collapse:separate;
}

table.none,
table.none th,
table.none td{
border:none
}

<table>
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table separate">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

<table class = "table none">
  <tr>
    <th>
      Head
    </th>
    <td>
      cell
    </td>
</table>

Answer 3

Answer №2

When it comes to CSS, the order matters as it reads from top to bottom. If you have a class defined for elements like

td, th, table {   border-collapse: collapse;   border: 1px solid #999; }

, and then later on have another class for

table.cancellation {     border: none;    }

, the properties of the last one will be applied.

If you want to ensure that a certain property is always used, irrespective of its position in the code, you can use "border: none !important". This rule takes precedence over everything else.

If neither of these techniques solves your issue, it might be helpful to provide more context by sharing the relevant HTML and complete CSS for the specific div element.

Answer 4

When it comes to CSS, the order matters as it reads from top to bottom. If you have a class defined for elements like

td, th, table {   border-collapse: collapse;   border: 1px solid #999; }

, and then later on have another class for

table.cancellation {     border: none;    }

, the properties of the last one will be applied.

If you want to ensure that a certain property is always used, irrespective of its position in the code, you can use "border: none !important". This rule takes precedence over everything else.

If neither of these techniques solves your issue, it might be helpful to provide more context by sharing the relevant HTML and complete CSS for the specific div element.

The CSS Specificity Hierarchy

Answer №1

Answer №2

Similar questions

How can I use jQuery to transform a div with its elements into a canvas?

Invoking a function means calling another one simultaneously

Trouble with CSS positioned image rendering in Internet Explorer? Z-index not solving the issue?

MUI Grid - justify content to the right

Creating a responsive grid layout with HTML and CSS

"Verifying the dimensions of the input sizes with the i

Having difficulty adjusting the padding of the Material UI table

Text that disappears upon clicking on show/hide按钮

Images are suddenly encircled by a mysterious border

What is the best way to incorporate padding into an Angular mat tooltip?

Troubleshooting HTML Label Problems

Restrict printing loops within the designated division layer

Floating CSS3 animations within HTML elements

Tips for incorporating a Python script into a online project

The font fails to load

The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

Managing the scrolling direction horizontally with waypoints.js

The appearance of the mock button varies between the development and production environments due to CSS styling

Steps for displaying a post's image when hovering over its link in WordPress

A step-by-step guide to implementing Inline Linear Gradient in Nuxt/Vue