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.