How to Combine Multiple CSS Rules

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 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.

Is it possible make a CSS rule that combines two or more other CSS rules?

The only way to combine CSS classes into one like that, that I know of, is to use a CSS pre-processor like LESS or SASS.

If you don't want to use that, I'm afraid you have to assign both classes separately.

combine multiple css styles into one

In bootstrap 4, the css for .alert is

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

and for .alert-secondary

.alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

So to combine them, use:

.login-alert-combined{
    font-family: 'Kavivanar', cursive;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

But I don't see what is wrong with setting class as "alert alert-secondary login-alert" when you want to use all 3 styles.

---

Related Topics