Combined Multiple Classes into One CSS Rule

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 can I combine 2 CSS classes into one?

You can achieve it, but not with CSS. You could use LESS files, and with the proper medium to parse from LESS to CSS file (and "casually" Bootstrap core is written in LESS, ;D). The specification you're looking for is: http://lesscss.org/features/#mixins-parametric-feature

Bootstrap allows you download the LESS files of its code to modifications, and then, you may use a JS compiler as said in lesscss.org/usage/#using-less-in-the-browser

If you're using PHP, there are some libraries to compile it before send it to the browser, the latest is going well with Bootstrap 3.0 and that I'm using is: http://leafo.net/lessphp/

Hope this helps, XD

How can I apply styles to multiple classes at once?

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

is what you are looking for.

Target elements with multiple classes, within one rule

.border-blue.background { ... } is for when both classes are used together.
.border-blue, .background { ... } is for either class.
.border-blue .background { ... } is for where '.background' is the child of '.border-blue'.

See Chris' answer for a more thorough explanation. Also see W3 Docs on CSS Combinators

Is there a way to individually target multiple CSS classes at once?

Use a comma.

.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
  color: #fc9426;
}

Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.

It might look something like this:

[class^="nav-"] {

  margin: 1rem 0;

  padding: 0 1rem;

  min-height: 3rem;

  color: #333;

  font: 1rem/3rem Arial, sans-serif;

  border-bottom: 1px solid black;

}

/**

 * Utility/Modifier style properties that

 * any nav could add to their base of styles.

 */

.nav-branded {

  color: white;

  background-color: #fc643c;

}

.nav-branded:hover {

  background-color: hotpink;

}

/**

 * These classes have styles specific to 

 * each class (acts like an ID but 

 * without the specificity).

 */

.nav-1 {

  /* Waiting for some styles. */

}

.nav-2 {

  border-bottom-width: 4px;

}

.nav-3 {

  border-bottom-style: dashed;

}

<nav class="nav-1 nav-branded">Nav One</nav>

<nav class="nav-2">Nav Two</nav>

<nav class="nav-3 nav-branded">Nav Three</nav>

css when using multiple class for same css property

.rule2{
  width:300px;
  background:#aaa;
}

This one defines the width for the tag since it comes at the end. When you are having multiple classes for a tag, and a common style for them all then it is always the last rule which will overwrite all the previous rules.

How to combine multiple selectors for the same rule

To group CSS selectors in a style sheet, you use commas to separate multiple grouped selectors in the style. In this example, the style affects two classes input#input_9_2 and input#input_9_3.

input#input_9_2,
input#input_9_3
{
  max-width: 500px;
}

The comma means "and", so this selector applies to all input#input_9_2 elements and input#input_9_3 elements. If the comma were missing, the selector would instead apply to all input#input_9_3 elements that are a child of an input#input_9_2. That is a different kind of selector, so the comma is important.

Any form of the selector can be grouped with any other selector.

How can I combine multiple CSS rules?

All you have to do is separate them with a comma e.g

div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
    width:100%;
}

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 {
}