Css - How to override css for a table cell

Question

css newbie question -
we have a generalized css defined for Table along with its Table Cells as:

.table {
    width: 100%;
    margin: 1em 0 1em 0;
    border-top: 1px solid #A3C0E8;
    border-left: 1px solid #A3C0E8;    
}

.table td, .table th {
    padding: .6em;
    border-right: 1px solid #A3C0E8;
    border-bottom: 1px solid #A3C0E8;
    vertical-align: middle;
    background:#D7E8FF;
    color:#333;
}

In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text. so, if Table Cell is defined as - <td> Vehicle Name & Details </td>

I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.

I added this style in css file -

.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }

and added to td as <td class="vehicle"> Vehicle Name & Details </td> but no icon is being shown. Parent table of this td is <table class="table">

Am I missing something?

Thank you!

Answer 1

.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).

You need either:

• a more specific selector (e.g. .table td.vehicle)
• an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet