how do I create multipe classes selector in css?

Question

My HTML:

<div class="first second">...</div>
<div class="third">...</div>

My CSS:

.first.second {
   ... // lots of properties setup here(50+ lines)
}

My questions are:

Q1-for .first.second selector, I think it mean .first && .second, not .first || .second, is my understanding correct? And what's the official name of it, I couldn't find resources about it.

Q2- I want class third to have the same properties setup but avoid to setup a new class selector like:

.third {
   ... // 50+ duplicated lines and take so much space on the css file
}

But I can't do it like:

.first.second.third {
   ... 
}

Because it means .first && .second && .third

So what's the best way to represent (classA %% classB) || classC

score 4 · Accepted Answer · edited Oct 21 '19 at 07:12

4

In your first question is yes, .first.second means AND, and in your second question the correct way to include the .third class is like this .first.second, .third

You can read more about CSS selectors here.

edited Oct 21 '19 at 07:12

Vaibhav Singh

892
7
20

answered Oct 21 '19 at 06:14

Francis ask question

875
5
18

score 0 · Answer 2 · answered Oct 21 '19 at 06:14

For Q1, your understanding is correct, it is .first && .second. For Q2, Best way to do this is to have a common class for both the divs and write css for that class. Something like,

<div class="first second common">...</div>
<div class="third common">...</div>

and,

.common {
//common css
}

score 0 · Answer 3 · answered Oct 21 '19 at 06:14

0

.first.second, .third {
   ... 
}

Use this Check this post What do commas and spaces in multiple classes mean in CSS?

answered Oct 21 '19 at 06:14

Amanjot Kaur

1,978
4
14
33

score 0 · Answer 4 · answered Oct 21 '19 at 06:15

Q1-for .first.second selector, I think it mean .first && .second, not .first || .second, is my understanding correct? And what's the official name of it, I couldn't find resources about it.

The .first.second selector will target all elements that have both class names, e.g.

<div class="first second"></div>

All elements that have just the first or just the second class name will be ignored.

Q2- I want class third to have the same properties setup but avoid to setup a new class selector

You can apply the same set of style properties to multiple selectors by chaining them in a comma separated list, e.g.

.first,
.third {
 /* ... */
}

This will apply the styles to all elements that have the first class name and also to all elements that have the third class name.

Zerhogi · Answer 5 · 2019-10-21T06:25:43.113

.yourselector:nth-child(n){ ...your css... }

<ul>
   <li class="first"> First </li>
   <li class="first"> Second </li>
   <li class="first"> Third </li>
</ul>

<style> 
    .first:nth-child(n){
        background-color: tomato;
        margin-bottom: 10px;
    }
</style>

if you want use .first .second .third

<ul>
   <li class="first"> First </li>
   <li class="second"> Second </li>
   <li class="third"> Third </li>
</ul>

<style> 
    li:nth-child(n){
        background-color: tomato;
        margin-bottom: 10px;
    }
</style>

score 0 · Answer 6 · answered Oct 21 '19 at 06:30

Answers below:

Q1: Yes, everytime you define 2 or more selectors together they result in AND operation. So it looks for an element which has both classA && classB.

You can introduce same styling for different classes at same time by using comma (,) to sperate them. That brings us to your second answer.

Q2:

.first.second , .third {
    // your style properties here
    // same style will appy to elements having both first and second classes
    // also the elements having only third class
}

how do I create multipe classes selector in css?

6 Answers6