CODEWITHSUNDEEP
cssclassstyles
Para
Para

Reputation: 2082

multiple css classes weird behavior

I had a class like this

.lifetime .containerrow
{
    text-align: center;
    height: 20px;
}

I needed to make the text in some of the elements bold so I did this:

.lifetime .containerrow .info
{
    font-weight:bold;
}

this didn't work but this did:

.lifetime.containerrow.info
{
    font-weight:bold;
}

Why? Isn't is the same thing?
Thanks
Don't know css that well

Upvotes: 0

Views: 111

Answers (3)

MassivePenguin
MassivePenguin

Reputation: 3711

That's correct behaviour. .class1.class2.class3 matches elements that have all three classes. .class1 .class2 .class3 matches an element of .class3 inside an element of .class2 inside an element of .class1.

If you want to apply the same style to three separate classes, you need to separate them with commas (e.g. .class1, .class2, .class3 { font-weight: bold; })

Upvotes: 2

Kyle
Kyle

Reputation: 67194

I assume that you want to apply a bold font-weight to multiple classes:

.lifetime,
.containerrow,
.info
{
    font-weight:bold;
}

You have to separate classes with a comma to select different classes on different elements yet apply the same style.

With the selector: .lifetime .containerrow .info you were selecting one element that had the .info class that was a child of .containerrow which in turn was a child of .lifetime.

Upvotes: 0

Andy
Andy

Reputation: 14575

.lifetime .containerrow .info
{
    font-weight:bold;
}

means an element with a class of .info that is nested inside .containerrow that is nested inside .lifetime

.lifetime.containerrow.info
{
    font-weight:bold;
}

means an element with the classes .lifetime, .containerrow and .info

Upvotes: 0

Related Questions