Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Style applied to a combination of classes?

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 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...

like image 521
Eli Avatar asked Mar 16 '10 00:03

Eli


People also ask

Can you combine classes in CSS?

Multiple classes can be applied to a single element in HTML and they can be styled using CSS.

What is CSS combination?

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space)

How do you write multiple classes in CSS?

To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.

What is a CSS style class?

What is a CSS class? A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.


2 Answers

$('.bold_green.bold_blue').addClass('something-else'); 

Or in CSS:

.bold_green.bold_blue { color: pink; } 

Notice there's no space between the selectors.

like image 63
Paul Alexander Avatar answered Oct 11 '22 03:10

Paul Alexander


You don't need anything special, just

.bold_green.bold_blue { color:pink; font-style:italic; } 
like image 24
Esteban Küber Avatar answered Oct 11 '22 02:10

Esteban Küber