Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

How can I combine CSS sibling and child selectors/"combinators" properly?

Short question: If I want to pick the child h5 of a div with id "foo", only when the div is preceded by a sibling with class "bar", what selector combination should I use? Is this possible to do, purely in CSS?

I'm messing around a little bit in with some personal CSS on Wikipedia. I'm using the beta Vector skin (see < http://en.wikipedia.org/wiki/Main_Page?useskin=vec... > for an example) and I've added a few scripts (see < http://enwp.org/User:Nihiltres/vector.js >) that add menu items with extra actions. I'm self-taught in CSS/JS, so yes, some of that stuff might be very ugly. :p

One script, the one that toggles the left-hand sidebar, appears even on Special pages (pages generated by the software, e.g. Special:Prefixindex or Special:Watchlist, as opposed to normal wiki pages) and so it generates a menu when there might be no general actions that appear as tabs on the right. Because of the way in which the borders for the tabs are generated, the resulting menu top doesn't have a left-hand border. I know what property to set (I change the border-image on the h5 child of the div that constitutes the menu) but I don't know how to use the selectors properly for the given case. I want to select the child h5 of the #p-cactions div, but only if it (the #p-caction div) is preceded by a div with class "emptyPortlet".

I initially tried

.emptyportlet + #p-cactions > h5 {…}

but that didn't seem to work properly (which seems obvious in retrospect: it's looking for the h5 having the sibling), so I'm asking here. Any ideas?

Update:

To be clear: the .emptyportlet is a sibling of the parent #p-cactions div of the h5, *not* a parent.

4 Answers

Relevance
  • gHaggy
    Lv 5
    1 decade ago
    Favorite Answer

    The short answer is yes, it is possible do it in CSS.

    If I understand this, your h5 is a child of #p-cactions, which is a sibling of another div, .emptyPortlet. In that case:

    .emptyPortlet + #p-cactions h5 {color:red;}

    Read as: h5, which is a child of the div #p-cactions, which is an adjacent sibling of the div .emptyPortlet.

    This assumes there is only one h5 within #p-cactions, unless there are several and you want them all styled the same way.

  • ?
    Lv 4
    4 years ago

    Css Combinators

  • alven
    Lv 4
    5 years ago

    Css Sibling

  • Anonymous
    1 decade ago

    .bar #foo h5 {

    blah

    }

    Work inside to outside.

    Ron

Still have questions? Get your answers by asking now.