The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Specificity question; multiple h2 tags

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #27085
    Ian G

    Hey guys,

    Just a quick question, is there a way to target specific h2 titles based on what they say(print)?

    My problem is that I have a sidebar with sections using h2 tags as their headers, but since the titles of articles underneath are h2 as well, I want each h2 to have a separate background to improve the distinction between the two. So I want to give the section title that is called "Latest News" a background without theming the rest of the article titles


    :mrgreen: :mrgreen: :mrgreen: Latest News :mrgreen: :mrgreen: :mrgreen:

    Doctor Who Struck Cyclist Found Guilty
    Plastic From Sugar Cane?
    Climate Change Skeptics Questionable Science

    Normally I would just add a h2 class to the section if I were coding it myself (h2 class= "Latest News") but I am using a CMS that autogenerates the classes, and there is no way to override or add new classes to the individual titles. :|

    So what I am working with is this:
    <div id="block-views-Mainpage_News_block-block_1" class="block block-views region-odd even region-count-1 count-2 with-block-editing">

    <div class="block-inner">

    <h2 class="title">Latest News</h2>

    <h2 class="title"> also controls the styling of the article titles within the section, so I don’t think I can use that. Is it possible to write the CSS to style the <h2 class="title">>Latest News</h2> ?

    Ian G

    Thanks for the quick reply Rob

    I tried div.block-inner h2 and div.block-inner h2.title and was scratching my head until I realized that both the Section Title and the article title links fall under the div.block-inner, and that seemed to be the highest level of specificity I could get for that block. The site is up online, you can poke around on it with Firebug.
    ecoevolution. org

    The sections I am trying to theme are the Latest news and the Blogroll sections on the front page. I want to make them more purty to clean up the look a bit and to make the sections more distinct. Right now, you can see the h2 have a background image that underlines titles. I’d like to have a class or other CSS-TRICK!!!!! that allows me to have a separate background image for the Latest News, and Blog Roll headers that doesn’t apply across to the actual article title h2’s themselves.

    I am a total novice, so I may be missing something obvious. Unfortunately the CMS won’t let me add my own specific title class (as far as I know) so I am stuck working with what you see there.


    Since your using drupal, go into your theme folder and open block.tpl.php. There you can add your own superawesome class. You’ll probably see something like:

    content ?>
"Robskiwarrior" wrote:
and wow if that’s drupal the code it outputs is awful! lol

Actually, it’s Views output. Views is basically a database tool which is very flexible and allows you to get content out of your database and display it in a lot of different ways. However, it outputs UGLY html code – mainly to give you the flexibility to style everything. But with caching, Views really doth rock.

Ian G
"Robskiwarrior" wrote:
Well your title for Latest News you can target like we did above, then the post titles inside you can target with:

div.view-content h2 { }

and the blogroll inner titles you can do with

div.node-inner h2 { }

and wow if that’s drupal the code it outputs is awful! lol

Yeah, it’s more than a little daunting to try and dig through when you are learning CSS.

Thanks Rob, Your plan worked. I used:
#block-views-Mainpage_Blog_block-block_1 div.block-inner h2
for the Section Title and
#block-views-Mainpage_Blog_block-block_1 div.block-inner .view-content h2
for the articles.

Being such a noob on CSS I was too focused on the actual article title element, I should have looked at the containing element to see if I could find something to grab there (.view-content).



You nailed it, it is Drupal and views. You’re right, I could do a custom block template, but I run into this issue frequently so I thought rather than pollute my site with a bunch of templates, I’d actually learn the CSS for once. Didn’t want having such a powerful tool making me lazy. ;)

I have the Blogroll themed now, working on the News section. Thanks guys, taught me something I needed to know!


Yeah, Views can be a kick in the teeth to template! CSS is the easiest way to go.

"Robskiwarrior" wrote:
and wow Views is evil. lol

Hahaha. Funniest quote all day.

Chris Coyier

CSS can’t see content, so you can’t write a selector that can match based on what an h2 tag "says". JavaScript can though. via jQuery

$(“h2:contains(‘monster’)”).css(“color”, “green”);
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.