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..

    How to make link color change based on location on page?

    How can I specify relative positioning in HTML?

    How do I put these on the same line?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How to change css image via php depending on weekday

    How to vary color of table row border based on div that it's in

    how to really include html codes inside php

    html, css: How to cause a div be presented on top of other divs

    How do I use CSS to select for a tag with arbitrary name attribute?

    How can I hide with CSS only?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to have the class=“selected” depending on what the current page/url is

    CSS: How to align elements around a centered element?

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to get the child of a parent div element

    How to share CSS StyleSheet amongst projects?

    How is this put in the center using CSS?

    How to implement multiple background-images for an id / class with the same CSS code?

    CSS - How to center Absolute Position div with max width in IE9,10,11

    How to position a SWIPER SLIDE in the centre of the page? [closed]

    how to vertically center align div elements with contents other than text

    HTML/CSS slight sideways scrollability, how to find source? [closed]

    jQuery - how do I show the full navbar at certain width?

    How to convert a xml element into url using css?

    How to change the Attribute background color in css code

    How do i create a gem which will generate a css file from a template

    How can I change the css properties of a google visualization table and it columns?

    How can I center the column vertically in bootstrap mobile mode?

    Is it possible to compress LESS CSS files with htaccess? (and how to?)