0

When I use a class selector to modify the width of an element it does not work. When I use a tag and class selector as in table.change-name it does work.

HTML:

        <!-- start settings -->
        <div class='settings'>
            <h4>Account Settings</h4>
            <table class='options'>
                <tr>
                    <td class='name username'>Name</td>
                    <td class='value'>Robert Rocha</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name email'>Email</td>
                    <td class='value'>tom@gmail.com</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name pword' colspan='2'>Password</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <tr>
                    <td class='name remove-all' colspan='3'><a href='#'>Delete All Photos</a></td>
                </tr>
                <tr>
                    <td class='name remove-account' colspan='3'><a href='#'>Delete Account</a></td>
                </tr>
            </table>




            <table class='change-name'>
                <tr>
                    <td class='first'>First</td>
                    <td><input type='text' name='fname' class='fname'></td>
                </tr>
                <tr>
                    <td class='middle'>Middle</td>
                    <td><input type='text' name='mname' class='mname'></td>
                </tr>
                <tr>
                    <td class='last'>Last</td>
                    <td><input type='text' name='lname' class='lname'></td>
                </tr>
                <tr>
                    <td class='save'><a href='#'>Save</a></td>
                    <td class='cancel'><a href='#'>Cancel</a></td>
                </tr>
            </table>

        </div>
        <!-- end settings -->

CSS:

/* Settings */

.settings {
    width: 650px;
    margin: 0 auto;
    padding: 1em;
}

.settings h4 {
    padding: 1em 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacece;
}

.settings table { 
    width: 100%;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 200;
    table-layout: fixed;
}

.settings tr { border-bottom: 1px solid #cacece; }
.settings td { padding: 0.5em 0; }
.settings .edit { text-align: right; }
.settings .name { font-weight: bold; }
.settings .remove-all, .settings .remove-account { font-weight: 200; }

/* Change Name Table */

.change-name {
    background: #cacece;
    width: 300px;
}

.change-name tr { border: none; }

Result: https://jsfiddle.net/yy1mu2ze/

If I do the following:

table.change-name {
    background: #cacece;
    width: 300px;
}

I get: https://jsfiddle.net/yy1mu2ze/1/

Why is this?

Robert Rocha
  • 8,656
  • 15
  • 59
  • 110
  • 2
    Learn about CSS Specificity. :) – Praveen Kumar Purushothaman Mar 18 '16 at 15:03
  • 3
    According to @Praveen Kumar it's a problem of specificity. Your `.settings table` has higher specificity than `.change-name` – nikoskip Mar 18 '16 at 15:06
  • 1
    You have another selector `.settings table` (specificity 011) which overrides the `.change-name` selector (specificity 010) and so it doesn't change whereas the `table.change-name` selector has same specificity as the first one but is lower down in the CSS file and hence takes precedence. – Harry Mar 18 '16 at 15:06

0 Answers0