CODEWITHSUNDEEP
csscss-selectors
EmmyS
EmmyS

Reputation: 12138

Why is my CSS class being overwritten/ignored?

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. enter image description here

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.

Upvotes: 5

Views: 24365

Answers (5)

Matthew
Matthew

Reputation: 25743

The score of the top style is {0, 1, 2, 0} and the score of the 2nd style is {0, 0, 2, 1}, you will need to add an ID (#homepage_speakers perhaps?) to the 2nd style to make it higher precidence. The order in which CSS occurs only matters when two styles have the same score.

Either that, or just add !important to the 2nd style, but I don't like to do that as I like to have a proper CSS hierarchy.

CSS selector score is calculated by {Is Important 1/0, number of IDs, number of Classes, number of Elements}. Higher order numbers always have a higher precidence, for example, a rule with 1 ID is higher than a rule with 5 classes and no ID.

Upvotes: 2

hcarver
hcarver

Reputation: 7214

It's a shame that you're being forced to solve the problem in a hacky way...

#home-blocks-aread .block div.content { background: none; }

would do the job.

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101594

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

Upvotes: 5

user1337
user1337

Reputation: 847

There's a few options. The easiest is probably to move your line to be after the #home-block-area... section. CSS is read from the top down, the farther down elements override the ones above.

Upvotes: 0

Drew
Drew

Reputation: 6862

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; }

Upvotes: 3

Related Questions