I'm not sure this is possible, but is there a syntax to be used in CSS when you want to style an element based on the combination of classes applied to it?
I understand that I can check an element with jQuery or something and change it's style based on the classes it has, but is there a pure CSS way to do this?
For example, if I have a class for bold and green:
.bold_green { color:green; font-weight:bold; }
And a class for bold and blue:
.bold_blue { color:blue; font-weight:bold. }
Now, say I am using jQuery to add and remove classes dynamically and want any element开发者_如何学Go that has both classes to turn italic pink.
Something like:
.bold_green AND .bold_blue { color:pink; font-style:italic; }
Or, if I want to style an element that has aclass, and is a descendant of another element that has another class?
Something like:
.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }
Thanks!
Edit
Thanks for all the answers. These are pretty much what I thought (just treating the classes as regular selectors), but they don't seem to be working for me. I will have to check my code and make sure they aren't being overridden somehow...
$('.bold_green.bold_blue').addClass('something-else');
Or in CSS:
.bold_green.bold_blue { color: pink; }
Notice there's no space between the selectors.
You don't need anything special, just
.bold_green.bold_blue { color:pink; font-style:italic; }
Paul and Voyager are correct for the multiple classes case.
For the "HAS CHILD" case you would use:
.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */
Which will style any bold_blue
elements inside a bold_green
element.
Or if you wanted a DIRECT child:
.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */
Which will style only bold_blue
elements which have an immediate parent bold_green
.
In visual studio 2013 the CSS setting is applied to multiple classes by a "Comma" as follows:
.bold_green, .bold_blue { color:pink; font-style:italic; }
精彩评论