css best way to set custom css modifications

Question

I have the following styles:

.alert {
    position: relative;
    border: 0;
}

.modal .modal-dialog .modal-content {
  border-radius: 6px;
  padding: 20px 20px 0 20px;
}

This applies for:

<div class="modal"></div>

I want to have a different style for something like this:

<div class="modal alert"></div>

But I dont want .alert to be applied because that style is for other elements.

I'm doing this:

.modal .alert .modal-dialog .modal-content {
  border-radius: 15px;
  background-color: #F3F3F3;
  padding: 0px 10px 0 5px;
}

But, I get the .alert style applied.

Any clue?

Answer 1

If you want .modal.alert not to inherit the styles from .alert then you should specify it in the .alert style definition:

.alert:not(.modal) {
    position: relative;
    border: 0;
}

As @cale_b comments it is better to assign a different class name for the .modal .alert so that you don't have to include the :not() selector.

For example: <div class="modal modal_alert"></div>