开发者

CSS: Style applied to a combination of classes?

开发者 https://www.devze.com 2022-12-22 20:34 出处:网络
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'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; }

0

精彩评论

暂无评论...
验证码 换一张
取 消