Css - How to override css for a table cell

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 overrid开发者_StackOverflowe 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!

---

.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

---

Change your selector to td.vehicle also make sure it appears after .table td selector in your css file.

You can also make the special td's style inline:

<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>

---

Double check to make sure your URL location is correct. I would first put in an absolute path (http://site.com/mainFolder...) first, then change it to a relative path.

---

try replacing the background position to

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

You can also change the no-repeat to repeat for debuging purposes to see if the image loads.

Also i advice u install firebug (if you are using firefox) so you can manipulate html and css on the fly.

---

It should work, make sure that the route to the image is correct. And also note that is a background image you are setting, so if you don't want the image to be behind the text you have to use padding --> jsfiddle