Why does a class property not override the Universal Property?

Question

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Berlin Sans FB';
}

I have put the above one at the top of my CSS and

.table-dark {
    font-family: 'Times New Roman', Times, serif !important;
}

this above one at the end.

I am using Bootstrap.

Over here, only the font-family: 'Berlin Sans FB'; is being used by the browser, but not the last one, i.e., font-family: 'Times New Roman', Times, serif !important;

I want to use the last one. Now, what should I do?

also used body > div > .jumbotron.table-dark{ font-family: 'Times New Roman', Times, serif !important; } — Sayan Dasgupta, May 12 '21 at 18:42
Does this answer your question? [CSS - Cannot override P.class because of \* definition](https://stackoverflow.com/questions/8463466/css-cannot-override-p-class-because-of-definition) — Heretic Monkey, May 12 '21 at 19:18

score 1 · Accepted Answer · edited Jul 20 '21 at 05:17

You're bumping into the crux of cascading, and the reason a lot of people avoid the wildcard selector.

The wildcard selector applies to all objects, and it isn't applying the style as an inheritance. You may assume that *{} is really affecting the <html> or <body> elements, but in actually it is applying directly to all elements. Because of this, *{} has higher specificity than an inherited style from the element's parent.

.table-dark is a container class, because of this, you likely have <tbody>, <tr>, and <td> elements between it and the content. This is stopping the <table> element from passing its font on. Think of it like this:

body {
  font-family: helvetica;
}
table {
  font-family: arial;
}

<body> <!-- helvetica -->
  <div> <!-- inherited helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- inherited arial -->
        <tr> <!-- inherited arial -->
          <td> <!-- inherited arial -->
            content <!-- inherited arial -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Here, the <body> is passing Helvetica to the <div>, however it is not passing it to the table, because table is defined in the CSS. However, you've assigned it to all elements, like this:

* {
  font-family: helvetica;
}
table {
  font-family: arial;
}

<body> <!-- helvetica -->
  <div> <!-- helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- helvetica -->
        <tr> <!-- helvetica -->
          <td> <!-- helvetica -->
            content <!-- helvetica -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Thank You. This definition along with example was really helpful. — Sayan Dasgupta, May 14 '21 at 17:09

score 0 · Answer 2 · edited Jul 20 '21 at 05:19

Child elements don't inherit font-family by default.

It will work if you have text directly inside .table-dark. If your text is wrapped by other elements (the p tag for instance), the * CSS rule will take precedence, and you wouldn't need !important either.

Created a sample here,

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica';
}

.table-dark {
  font-family: 'Times New Roman';
}

<div class="table-dark">
  This is Times New Roman
  <p> This is Helvetica </p>
</div>

You can read more about CSS specificity here.

score 0 · Answer 3 · edited Jul 20 '21 at 05:20

The CSS renders when the page loads, so it will override the ".table-dark" style, because there are still some elements after the ".table-dark" div.

Try avoid using * for changing styles. Instead you could use "body" or "main".

See snippet below:

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Berlin Sans FB';
}
.table-dark{
    font-family: 'Times New Roman', Times, serif !important;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <main>
      <div>header: Berlin Sans FB Text</div>
      <div class="table-dark">
          'Times New Roman' Text
      </div>

    </main>
</body>
</html>

score 0 · Answer 4 · edited Jul 20 '21 at 05:22

0

Your element isn't going to inherit the font-family property because you've already given it its font-family property using the universal selector.

edited Jul 20 '21 at 05:22

Peter Mortensen

30,738
21
105
131

answered May 12 '21 at 18:56

Jan Thoresen

71
1
8

Why does a class property not override the Universal Property?

4 Answers4