Grow your CSS skills. Land your dream job.

adjacent siblings

  • # February 26, 2010 at 2:08 am

    Hello, I want to have different background colors on a sidebar and they’re all classed the same. How do you distinguish them in your CSS so that you can style them differently? The HTML looks like this. I’ve tried using adjacent siblings, but it doesn’t seem to create the look I’m looking for.

    <div class="favs">

    <h3>Books</h3>
    <ul>
    <li>Butterflies for Dummies</li>
    <li>World of Butterflies</li>
    <li>Are You a Butterfly?</li>
    <li>Tale of Two Butterflies</li>

    <li>Butterfly Erotica</li>
    <li>The Happy Butterfly</li>
    <li>No Bad Butterflies</li>
    </ul>
    </div>
    <div class="favs">
    <h3>Movies</h3>

    <ul>
    <li>Butterfly Love</li>
    <li>Cocoon</li>
    <li>Madame Butterfly</li>
    <li>The Butterfly Effect</li>
    <li>Butterflies Are Free</li>

    <li>Why Butter Flies</li>
    <li>Mothra</li>
    </ul>
    </div>
    <div class="favs">
    <h3>Sports</h3>
    <ul>

    <li>Butterfly Baseball</li>
    <li>Swim the Butterfly</li>
    <li>Skiing For Butterflies</li>
    </ul>
    </div>

    # February 26, 2010 at 5:56 am

    Why don’t you just name your divs favs1, favs2 and favs3 and change the background colour accordingly, or am I totally missing the point… :?:

    # February 27, 2010 at 12:34 pm

    If I could do that then I wouldn’t have posted on here. However, I can’t change any of the html. I’ve thought about using the nth child on this one, but how do I ensure that the h3 is styled the same background color as its corresponding list. Help

    # February 27, 2010 at 12:57 pm

    I think you need to post a link if you want more replies to your question.

    Rob
    # February 27, 2010 at 1:04 pm

    Firstly as you pointed out – this is an option although not very compatible.

    http://reference.sitepoint.com/css/pseudoclass-nthchild

    Then you could use some jQuery magic which would help with compatibility…

    http://api.jquery.com/nth-child-selector/

    Other than that you will have to change your HTML, what is the reason you can’t?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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