CODEWITHSUNDEEP
htmlcssclasscss-specificity
ProtectedVoid
ProtectedVoid

Reputation: 1315

HTML. Assign multiple classes with subclasses to a element

I'm struggling with HTML classes. I've got these classes in CSS:

.a{}
.a .b{}
.a .c{}

And I'm trying to assign two classes to elements like this:

<div class="a b"></div>
<div class="a c"></div>

But none of these work, the element only inherits "a" class. I think It is logically that the second class must be assigned in absolute way like:

<div class="a (a b)"></div>

But I can't find the correct way. Maybe what I'm trying to do is stupid but I can't find another way (keeping specificity in CSS).

Upvotes: 1

Views: 1380

Answers (2)

Ulrich Schwarz
Ulrich Schwarz

Reputation: 7727

The selector for "has both classes a and b" is .a.b, so no space in between.

Upvotes: 2

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

If you want to use this css on a markup

.a{}
.a .b{}
.a .c{}

Change 

<div class="a b"></div>
<div class="a c"></div>

to

<div class="a">
   <div class="b"></div>
</div>
<div class="a">
   <div class="c"></div>
</div>

Note: the space in css between to selectors mean Descendant selector

the same way you have > alias Child selectors to selector the direct child ie:

.a{}
.a > .b{}
.a > .c{}

Now let us say you want to apply it to a single element, all what you have to do is to remove the space between those selectors like this:

.a{}
.a.b{}
.a.c{}

this style will the match this markup 

<div class="a b"></div>
<div class="a c"></div>

Upvotes: 5

Related Questions