Get Selector By Sibling's Children?

Question

<div class="prev-button"></div>
<div class="container">
    <div class="product"></div>
</div>

Is it possible to get "prev-button" element by "product" element In CSS ?

I mean something like ".prev-button! .product" for example.

Although it seems to be crazy to do this way, it is possible, isn't it?

its impossible with CSS, there's no such as parent selector in CSS, thats why it is called Cascading styles because its selectors cascades to child elements — Netorica, Mar 27 '14 at 07:15
@Mahan: That's not what cascading means but yes, there isn't a parent selector. — BoltClock, Mar 27 '14 at 07:18
@InOrderToLive Well actually it does exist, but the browsers don't support CSS4 standard yet, so if you are willing to wait you will get is sooner or later :) — TheCodeDestroyer, Mar 27 '14 at 07:23
@TheCodeDestroyer: No, there isn't, and there's no telling if the method that it does propose that resembles a parent selector will even be usable in CSS anyway. It's not as simple as you think. See my comments under http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — BoltClock, Mar 27 '14 at 07:26
@InOrderToLive Currently the only way though is to do it with JS — TheCodeDestroyer, Mar 27 '14 at 07:26
@BoltClock Well I just made a joke, but you had to ruin it. And yes I know that its not as simple as it looks it still being defined and redefined all the time, but one can hope, right? — TheCodeDestroyer, Mar 27 '14 at 07:33

score 1 · Answer 1 · edited May 23 '17 at 10:26

You are asking for a CSS selector this way: “Is there a CSS parent selector?”.

Starting your selector at .product, you cannot ascend the DOM tree to give styles to parents or siblings respectively. You can either change the structure of your markup to match your wishes, or you can use JavaScript to select the elements you want to modify.

The nearest thing to this is, for instance, div.container:hover > div.product{color:red;}, which alters the children when the parent is hovered.

So no, there is no “parent’s previous sibling” selector in CSS. You can’t achieve it with child selectors (>) or sibling selectors (+).

score 0 · Answer 2 · answered Mar 27 '14 at 07:31

0

if you are using jQuery then you may get this

$('.product').parent().siblings('.prev-button').addClass('prevButton');

and then you can define css for .prevButton in stylesheet

this is one possibility http://jsfiddle.net/49Jpt/4/

answered Mar 27 '14 at 07:31

Pravin Waychal

2,253
1
15
24

Get Selector By Sibling's Children?

2 Answers2