Style Div based on inner class

Question

I have a div button which has the inner class with class="disabled". May I know how to detect based on the inner class?

<div class="nextBtn btnCls">
   <a id="content_0_nextLinkID" class="disabled" style="height: 202px;">
       Next Floor &gt;
   </a>
</div>

And I need to put styling when detect the a class is attached with disabled.

You can do this with Javascript, it is not possible via CSS. — Ruddy, May 05 '15 at 07:35
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Pete, May 05 '15 at 07:48
The difficulty that I faced is that when the code detects , how would I style my
div with some properties and disabled the button action. — Luke Lee, May 05 '15 at 11:13

score 0 · Answer 1 · answered May 05 '15 at 11:07

Seeing that your a is directly inside the div, I believe you can achieve what you want by simply styling the a element properly.

The below block stretches out the a to fill the parent div.

.btnCls > a {
    display: block;
}

Note that it also has the side effect of stretching out the parent div to accommodate the height of the a element, so you might want to adjust that (202px seems a bit too tall :-))

Then directly apply the style you want on the a element

.btnCls > a.disabled {
    background-color: green;
}

Note that if you are going to style anything on the border or outside of the bounds of the parent div (say the border or shadow), you are out of luck (as far as I know for now), but I'm guessing most button disables just change the background color or font.

score 0 · Answer 2 · answered May 05 '15 at 11:31

0

CSS works only the other way round: you can select child nodes based on parent nodes but you can not select parent nodes based on child nodes.

div[disabled] > a

This selects a which is a child of a div having the attribute disabled. See the specs for CSS 2:

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

and CSS 3:

http://www.w3.org/TR/css3-selectors/#selectors

answered May 05 '15 at 11:31

ceving

16,775
7
82
137

So are you saying that it is not possible for me to style the parent div based on its child's properties? – Luke Lee May 06 '15 at 01:28
That is what I say. It is possible with XPath but not with CSS selectors. – ceving May 06 '15 at 08:15

Style Div based on inner class

2 Answers2