Question

I had previously asked a question on this issue, to which you guys supplied fantastic answers. I since “discovered” the intoxicating power of contextual styling (http://www.w3.org/TR/css3-selectors/#selectors) — thanks once again to you all — and now I am hooked.

I’ve made good progress on applying contextual styling to my current design here:

http://jsfiddle.net/gFA4p/200/

I’ve run into a few issues, though.

Here’s a screenshot of what I’m trying to do:

My first question, am I being overzealous in trying to apply contextual rules and making it harder than it needs to be?

Two, if not, what do I need to do to accomplish my target styling, per the screenshot?

Three, how to make this cross-browser compatible? Even as-is, it looks wonky in other browsers.

Answer 1

Using CSS selectors is not overzealous as long as it allows your HTML code and style sheets to be simpler, easier to understand and modify;
for example, with less className attributes in your HTML.
Furthermore, it is the best way to learn them!

For the second part of your question, I suggest you this CSS (
http://jsfiddle.net/S8Bne/ ) :

.geniusPicks {}

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;}

.geniusPicks table tr#picksHeading {border:0px solid; height:30px;}

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;}

.geniusPicks table tr.pickHeading {border:0px solid;}

.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;}

.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;}

.geniusPicks table tr.pickConsensusBody td {
    border-left:1px solid;
    border-top:1px solid;
    background:grey;
}

.geniusPicks table tr.pickBody td {
    border-left:1px solid;
    border-top:1px solid;
}

.bigGap td {height:19px;}

.smallGap td {height:10px; border-top:solid 1px black;}

.geniusPicks table th,
.geniusPicks table th:last-child,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;}


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}

/* Border Left Radius */
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td {
    border-radius:15px 0 0 0; 
    -moz-border-radius:15px 0 0 0;
    -webkit-border-radius:15px 0 0 0;
    -khtml-border-radius:15px 0 0 0;
}

/* Border Right Radius */
.geniusPicks table thead tr#picksHeading th:last-child {
    border-radius:0 15px 0 0; 
    -moz-border-radius:0 15px 0 0;
    -webkit-border-radius:0 15px 0 0;
    -khtml-border-radius:0 15px 0 0;
}


.geniusPicks table .pickHeading+tr td:nth-child(4) {
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
    border-top-style:solid;
    border-top-color:black;
    border-top-width:1px;
}

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]),
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) {
    border-top-style:dotted;
    border-top-color:black;
    border-top-width:1px;
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
}

The nice thing with this solution is that it does not require to modify your HTML code at all.

However, the borders that must be dotted will remain solid if the browser (e.g. IE8) does not support the CSS3 :nth-child or :not pseudo-class.

Tell me if you would prefer something that relies only on CSS2.
But in that case it will be necessary either to add a class attribute to every cell that has to be dotted,
or to split every row that has 7 cells so that every “vlah” cell becomes the first child of its row.