How to Apply Styles to Multiple Classes at Once

How can I apply styles to multiple classes at once?

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

is what you are looking for.

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/

Apply style to multiple selectors or use multiple classes. Which has better performance?

I too had this question and after some research I found a post about CSS Rendering Speed - Grouping Selectors vs Properties on Forrst.

While the author compares the difference between grouping selectors vs properties in the CSS, I wanted to know if it were faster to apply styles using multiple classes on the elements… so I made a test, the author ran it, turns out it is faster to use multiple classes in your html:

                                   1k      10k
Grouping Selectors layout time   ~12ms   ~110ms
Grouping Properties layout time  ~12ms   ~117ms
Object Oriented CSS layout time  ~11ms   ~112ms

Grouping Selectors DOM ready     ~50ms   ~405ms
Grouping Properties DOM ready    ~64ms   ~640ms
Object Oriented CSS DOM ready    ~47ms   ~349ms

Grouping Selectors file size      55kb    563kb
Grouping Properties file size     93kb    943kb
Object Oriented CSS file size     64kb    633kb

Additionally when you use more classes in the markup your code will be more readable, predictable, maintainable, scaleable, etc. When you read the following code, you know that this item is an icon and that it's also a checkmark icon.

<div class="icon icon-checkmark"></div>

This code also allows for easy selection of all "icon" elements with JavaScript.

Overloading the styles on a class will limit the ways in which you can use the class.

All said, since the actual browser render time delta is negligible, optimization at this level should be focused on saving developer time.

The answers here are quite sound too: CSS - Multiple vs Single class on an element

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 apply style to multiple classes on hover of an element?

Include both the class as part of the selector in querySelectorAll(). Then loop through them to set the style individually:

Try the following way:

function overRock() {
  var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#008000";
    el.style.fill = "#008000";
  });
}

function outRock() {
  var myPara = .querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#000";
    el.style.fill = "#000";
  });

}

Multiple two-class selectors in Sass

try this:

body{
   &.shop, &.contact, &.about, &.faq {
        background-color:#fff;
    }
}