Why does HTML element inherit CSS from an unspecified class?

Question

I'm an amateur in web development and I'm having problem styling my page properly. My elements <th> and <td> get styled by the .lookup_result th, td {} instead of .form_output . entry_cache th, td {}. Do I understand CSS wrong if I expect the <th> and <td> elements to only get the style from the classes of its "parents" and not a class that is not related to my entry?

My HTML:

<div class="form_output">
    <table class="entry_cache">
        <th>
            Header
        </th>
        <td>
            Data
        </td>
    </table
</div>

My CSS:

.form_output .entry_cache th, td {
    width: 10em;
    text-align: left;
}

.lookup_result th, td {
    width: 7em;
    text-align: right;
}

score 3 · Accepted Answer · answered Jul 01 '20 at 07:48

You need to add the hierarchy for both tags, otherwise you apply it to every td.

.form_output .entry_cache th, 
.form_output .entry_cache td {
    width: 10em;
    text-align: left;
}

.lookup_result th,
.lookup_result td {
    width: 7em;
    text-align: right;
}

Why does HTML element inherit CSS from an unspecified class?

1 Answers1