Grow your CSS skills. Land your dream job.

CSS Specificity question; multiple h2 tags

  • # December 4, 2009 at 6:03 pm

    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

    Ex:

    :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> ?

    Rob
    # December 4, 2009 at 6:28 pm

    Well you can do…

    div.block-inner h2 { }

    and that will target every H2 only inside the div with the class of block-inner.

    if you want to be more specific you could do

    div.block-inner h2.title { }

    that would target only H2s in the div with the class block inner that have the class "title"…

    Does that help? If you could paste some code in a code box that would be great – just the sidebar section :)

    # December 4, 2009 at 6:59 pm

    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.

    # December 4, 2009 at 8:10 pm

    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:

    Code:
    < ?php print $block->content ?>
Rob
# December 5, 2009 at 3:57 am

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

# December 5, 2009 at 9:25 am
"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.

# December 5, 2009 at 4:10 pm
"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).

@JaredAM
[img]http://i282.photobucket.com/albums/kk275/richwell888/fry-see-what-you-did-there-scaled.jpg[/img]

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!

# December 5, 2009 at 6:30 pm

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

Rob
# December 6, 2009 at 3:35 am

no probs – glad you sorted it…

and wow Views is evil. lol

# December 6, 2009 at 4:39 pm
"Robskiwarrior" wrote:
and wow Views is evil. lol

Hahaha. Funniest quote all day.

# December 6, 2009 at 11:11 pm

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

Code:
$(“h2:contains(‘monster’)”).css(“color”, “green”);
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".