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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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 5

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.