Question

In my CSS, I’m using 2 class selectors (Twitter bootstrap w/ 30 columns):

.row-fluid .span9 {
width: 29.5597485%;
*width: 29.50766516666667%;
}

How do I ensure that this rule is being applied? Neither of my attempted HTML set-ups seems to work. Is one of these proper syntax, or is there another way to ensure the CSS rule above is being applied to the HTML?

HTML Idea 1:

<div class="row-fluid span9">

HTML Idea 2:

<div class="row-fluid">
    <div class="span9">

Answer 1

Your first markup will not apply based on your CSS.

.row-fluid .span9 means an element with class .span9 as a descendant of .row-fluid so it won’t match HTML 1. It would match HTML 2.

• First HTML example is matched by .row-fluid.span9.
• Second HTML example is match by .row-fluid .span9, or '.row-fluid > .span9 if you want to ensure only direct children of .row-fluid.

It’s also possible you are correctly matching the CSS selectors, but your styles are being overruled by higher specificity of the bootstrap default styles. In this case throw a !important at the end of you styles to test. It will overrule.

I’d recommend using FireBug, or another HTML inspector which will help you debug CSS issues in a much faster way than trial and error.