CODEWITHSUNDEEP
htmlcss
user3457003
user3457003

Reputation: 3

Apply CSS to an element that belongs to two classes but not those two classes individually

Is it possible: I have a div that belongs to two classes and I want to add some more config to the div but dont want the parent classes individually to have those properties. E.g.

div-one

<div class="classA classB">Some Text</div>

div-two 

<div class="classA"></div>

div-three

<div class="classB"></div>

Now in the CSS file:

.classA{
height:100%,
width:100%
}
classB{
text-align:center,
etc:etc
}

Now how do I apply some additional config to the div-one without adding those config options to the classes A & B and I cannot use the ID property because the div gets created dynamically. So I want some functionality like 

.classA .classB{
//additional config
}

But I dont want the additional config to be applied to div-two and div-three

Upvotes: 0

Views: 79

Answers (2)

Amaynut
Amaynut

Reputation: 4271

There is always several ways to target an element with CSS. In you case, you can for instance add a classC to the first div. Or select it with a pseudo selector: 

div:first-of-type {color: blue;}

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

If I'm understanding your question correctly, you want to style only the div that has both classA and classB correct? If so, here is how you do that:

.classA.classB {
//additional config
}

Note how there is no space between the two classes. This means that the styles you set will only be applied to elements that have both classA and classB

Here is a fiddle showing it off: http://jsfiddle.net/NbJ2j/

Upvotes: 4

Related Questions