How to Apply Two CSS Classes to a Single Element

Using two CSS classes on one element

If you want two classes on one element, do it this way:

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

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

How to apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

class overrule when two classes assigned to one div

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

How can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

Can a div have multiple classes (Twitter Bootstrap)

Sure, a div can have as many classes as you want (this is both regarding to bootstrap and HTML in general):

<div class="active dropdown-toggle"></div>

Just separate the classes by space.

Also: Keep in mind some bootstrap classes are supposed to be used for the same stuff but in different cases (for example alignment classes, you might want something aligned left, right or center, but it has to be only one of them) and you shouldn't use them together, or you'd get an unexpected result, basically what will happen is that the class with the highest specificity will be the one applied (or if they have the same then it'll be the one that's defined last on the CSS). So you better avoid doing stuff like this:

<p class="text-center text-left">Some text</p>

Using multiple classes in one element and specificity

It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.

CASE 1

.foo  { background : red; }
.bar  { background : blue; }

class = 'foo bar' would be blue in this instance.

CASE 2

.bar  { background : blue; }
.foo  { background : red; } 

class = 'foo bar' would be red in this instance.

Working Example

css selectors to apply rules to multiple class of similar element

Addressing Your Concern

You state:

My concern: Is browser, is going to look for all td for each comma
separation and find the class match. That means it going to find all
td tags three times. If this is true, how can i make browser to search
for td tags once and then find class matches.

But that is not how css evaluates, as it goes from right to left. In the case you give:

td.first, td.fourth, td.fifth
{
    color:purple;
}

So it will not search "three times" through td elements. Rather, it will match the .first class in your document (where ever it is), then check to see if it is applied to td element, and if so, match. Then evaluate .fourth, etc. in a similar fashion.

So if your concern is iterations through td elements, then your concern is invalid. Your code is efficient as it is.

How to add multiple classes in Material UI using the classes props?

you can use string interpolation:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

---

Related Topics