Grow your CSS skills. Land your dream job.

Grouping Selectors Help

  • # February 25, 2012 at 7:53 pm

    Hi all,

    I’m trying to group selectors while simultaneously using an adjacent selector, I.E;

    .divname p + h1, h2, h3, h4, h5 {}

    It works but it’s also causing a bleed into the rest of the page for other header tags that should not have these styles so I’m assuming this isn’t the right method.

    Anyone got any tips?

    # February 25, 2012 at 8:00 pm

    sample of the page this goes with? makes little sense without context :)

    # February 25, 2012 at 8:10 pm

    Here’s a fiddle of the problem – see how the css is falling into each div even though it shouldn’t?

    http://jsfiddle.net/andyunleashed/APREs/

    # February 25, 2012 at 8:26 pm

    Is this along the right lines? http://jsfiddle.net/APREs/1/

    # February 25, 2012 at 8:32 pm

    Not really – the idea of the adjacent selector is for paragraphs to have a border-top only when following a header tag.

    Basically I’m doing some sexy effects for underlines so on P tags that don’t follow an H tag the border isn’t needed.

    I’ve been playing with having an adjacent selector with a follow group for ages this evening but can’t get it going.

    # February 25, 2012 at 8:44 pm
    .divname p + h1, h2, h3, h4, h5 {}

    is very different than

    .divname p + h1, .divname p + h2, .divname p + h3, .divname p + h4, .divname p + h5 {}

    In other words, you can’t comma deliminate siblings used with the adjacent sibling combinator

    # February 25, 2012 at 8:46 pm

    This? http://jsfiddle.net/APREs/2/

    # February 25, 2012 at 8:54 pm

    @wolfcry911 That’s what I thought the answer would be, major shame!

    @karlpcrowley – Yeah that’s what I’ve got right now, was just hoping I could condense the code a bit <– basically just looking to make the CSS as mini as possible. Appreciate the help with the fiddle forks though!

    # February 25, 2012 at 8:56 pm

    That’s about as small as I can see it getting without breaking :D

    # February 25, 2012 at 9:04 pm

    Me too – I think I’m going to call the W3C in the morning and tell them to sort it out!

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

You must be logged in to reply to this topic.

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