Why is my CSS class being overwritten/ignored?

Question

I know that id takes precedence over class; unfortunately my html is generated by Drupal and there's no way for me to add an id to the particular div that needs styling.

Here's the basic, stripped-down HTML (content removed for brevity).

<div id="home-blocks-area" class="clearfix">
    <div align="center" id="homepage_speakers">
        <div class="region region-home-speakers">
            <div id="block-speaker-carousel-speaker-carousel" class="block block-speaker-carousel ">
                <div class="content">
                <!-- actual content -->
                </div>
            </div>
        </div>
    </div>
</div> 

I need to be able to target that <div class="content"> div with a stylesheet. Problem is, according to Firebug my style code is being superseded by the styles for #home-blocks-aread .block .content, which are not the same style I need for this one div.

What CSS do I need to use to get at that specific div, keeping in mind that as I said, I cannot add an id to it.

Answer 1

CSS Specificity is the answer (as to why your style is being overridden). An ID in the selector adds a higher specificity than your two-class style.

You need to either be more specific on your style (maybe add more classes or add more root elements to increase its value) or (as you mentioned) create an ID that would out-weigh the current stylesheet.

You can also use !important, but many would argue that as hack-ish considering it's primary intent is for client-side customizations (for accessibility).

Answer 2

You could add importance to it, like so:

.region-home-speakers div.content { background: none !important; }

However, it's not a great practice to do it like this. I would definitely change the CSS like BoltClock says to something like this:

#home-blocks-area .region-home-speakers div.content { background: none; }