Select a specific element which has multiple classes?

Question

I want to select a specific element identified by three classes. Is this possible? For example, some div element has three classes: alpha, beta and charlie. Some other elements have one or two of these classes also, but I just want my code to affect elements with all three of them, like:

.alpha beta charlie { ... }

Is this possible?

The above example is completely random, I know it doesn't work, but I just wanted to depict what I'm planning to achieve. I'm still trying to learn CSS completely.

Thanks!

score 1 · Accepted Answer · answered Feb 19 '16 at 23:32

You can just do like below DEMO:

CSS:

.alpha.beta.gamma{color:red;}

HTML:

<div class="alpha beta gamma">
   hello
</div>
<div class="alpha beta gamma delta">
   hello
</div>
<div class="alpha beta  delta">
   hello
</div>

This will change color to all the divs which has those three classes together.

Emil Borconi · Answer 2 · 2016-02-19T23:33:59.493

0

If your CSS rules looks like:

<style>
.alpha { .... }
.beta  {..... }
.charlie {.....}
</style>

And your html like:

<div id=div1 class='alpha beta charlie'><div>
<div id=div2 class='alpha beta charlie'><div>

Then both divs will have all the rules from all 3 classes.

If you then have an additional div like:

<div id=div3 class='alpha beta'><div>

That will only have the rules only from classes called alpha and beta.

edited Feb 19 '16 at 23:33

answered Feb 19 '16 at 23:30

Emil Borconi

3,326
2
24
40

1

Change `style` to `class` and you'll be correct. – amflare Feb 19 '16 at 23:33
Ooopss.... I think it's time to sleep at midnight rather then hanging out on StackOverflow :) Thanks. – Emil Borconi Feb 19 '16 at 23:34

score 0 · Answer 3 · edited Feb 20 '16 at 05:29

0

I believe you are asking how to write your selector using the three class names:

 .alpha.beta.charlie {}

When they are attached, it will style any tag with all 3 of those classes:

<element class="alpha beta charlie">

edited Feb 20 '16 at 05:29

Andrew Myers

2,754
5
32
40

answered Feb 19 '16 at 23:33

G-Cyrillus

101,410
14
105
129

Select a specific element which has multiple classes?

3 Answers3