Correct me if my understanding is wrong, but I've got the following classes:

.grid_results_table {   /* Applied to a table */
    ...
}

.grid_results_table td {
    border: 1px solid grey;
}

.grid_results_startstop_label {   /* Applied to a TD within grid_results_table */
    border: 0;
}

When I run this through Prince, every TD in the table has a border, including the one which has grid_results_startstop_label applied.

Because .grid_results_table td is at best an "Attribute, Class and Pseudo-class selector" (I'm thinking it's considered a type selector?), shouldn't its priority be lower than or equal to grid_results_startstop_label? Wouldn't grid_results_startstop_label's border attribute override .grid_results_table td since grid_results_startstop_label is defined later in the document?

I tried this variation and got the same result:

.grid_results_table|td {
    border: 1px solid grey;
}

I thought that maybe using !important would be a viable workaround:

.grid_results_table {
    ...
}

.grid_results_table td {
    border: 1px solid grey;
}

.grid_results_startstop_label !important {
    border: 0;
}

But that gave the same result as well.

I don't have any other superseding CSS which gives TDs grey borders. I'm at a loss and hoping someone can correct me or confirm a bug.

Thanks

Edited 13 Sep 2007 by cmillard

The proper CSS is

.grid_results_startstop_label {
    border: 0 !important;
} 
}

"!important" is a rule-level element, not a selector-level.

You could also increase the specificity of the second selector by adding an element type:

td.grid_results_startstop_label { border: none }

This should make it as specific as the first selector, and since it's later in the style sheet it should override it.

Thanks very much you two! My understanding of CSS application is obviously not very thorough.

-Chris