CODEWITHSUNDEEP
csscss-selectors
mrN
mrN

Reputation: 3770

Css multiple class selector .class1.class2 not working

I am trying to select an element with multiple classes.

.parent1 .subparent2 .class1,
.parent1 .subparent2 .class2,
.parent1 .subparent2 .class3 { }

As

.parent1 .subparent2 .class1.class2.class3

to select an element with all three classes but it doesn't work.

Upvotes: 3

Views: 5436

Answers (1)

Nick Craver
Nick Craver

Reputation: 630607

What you have works, if the browser supports it, you can test it here. Here's my test markup:

<div class="parent1">
    <div class="subparent2">
        <div class="class1 class2 class3">Match</div>
        <div class="class1 class2">No Match</div>
    </div>
</div>​

With your current selector:

.parent1 .subparent2 .class1.class2.class3 { color:red; }​

Based on comments: To be clear, the two selectors are not equivalent, this:

.parent1 .subparent2 .class1, .parent1 .subparent2 .class2 ...

Means that the child can have any of the classes and match, but this:

.parent1 .subparent2 .class1.class2.class3

Means the child has to have all of the classes to match, so they serve different purposes.

Upvotes: 4

Related Questions