Css - How to override css for a table cell

Tags: css

Problem :

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;

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!

Solution :

.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

    CSS Howto..

    CSS layout - How to lay every box especially when sidebar is not staying in the container?

    Bootstrap css, how to make always visible navbar-toggle?

    Making dijit.Dialog Transparent when it shows up

    How to hide div on swipe in Angular

    How to target an element under an other element?

    how to position element equally from left and right sides?

    How to set Bootstrap @font-family-base?

    How to position text in a div?

    How to make a div next to each other in CSS

    How To Create A Responsive Horizontal Layout Using CSS?

    How do you add a footer with css display: table?

    CSS: how to make a span only as wide as its content

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    How to float 3 divs with margin left & right 0px?

    how to style simple_form with material design or custom css

    How to place a Show/Hide toggle button next to a header (not under the header)?

    how to make body tag elastic?

    How to have logo go into / overlay black bar along the top of screen?

    How to protect my injected elements CSS?

    Bootstrap CDN + WP // How to edit '.css’

    How to perform media queries if either statements are correct?

    How to create marquee infinite loop of logos slider with css only

    How to capture hover events on css (less) box-shadow

    How to use CSS with JS [duplicate]

    How to dynicamlly center the center of a div based on screen size

    CSS Image size, how to fill, not stretch?

    How to manage multi tenant web portal css using Asp.Net MVC

    How to move content in ul to the center HTML + CSS

    How to design a web page with multiple color panes without tables [duplicate]

    Text Underline Showing Underline