5

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.

EmmyS
  • 11,892
  • 48
  • 101
  • 156
  • 2
    Can't you just add `#home-blocks-area` to your second selector to balance it out, since you know IDs are more specific than classes (and you just answered your title with that knowledge)? – BoltClock Jul 11 '12 at 16:45

5 Answers5

5

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

Brad Christie
  • 100,477
  • 16
  • 156
  • 200
  • What I mentioned was that I CAN'T add an id, as the HTML is dynamically-generated by Drupal. – EmmyS Jul 11 '12 at 16:52
  • 1
    @EmmyS: I understand you can't add one to _that_ element, however you _can_ use pre-existing IDs found in the parent list to increase that style's specificity. – Brad Christie Jul 11 '12 at 16:58
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; }
Drew
  • 6,736
  • 17
  • 64
  • 96
2

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.

Matthew
  • 24,703
  • 9
  • 76
  • 110
0

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.

user1337
  • 827
  • 7
  • 18
0

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.

hcarver
  • 7,126
  • 4
  • 41
  • 67