Home / Questions / 338946
Accepted
Orici
Asked: 2020-03-24 02:56:14 +0800 CST 2020-03-24 02:56:14 +0800 CST

Using the CSS pseudo-class :not

  • 772

I want to apply custom styles to all elements of a modal. First I try to override all the styles that may come "inherited" for the "modal" class, for example, in case I use Bootstrap.

So I have the following rule:

.modal * {
    all: unset;
}

Now I would give each element of the modal its own styles. Problem: I also load my own styles into other sheets, for example for buttons, so the above rule overrides them. I wish I could apply them without increasing specificity or adding !important to all these styles I'm going to load. For example I would use this HTML for a button (which is under the modal class):

...Sign in

And the CSS for the buttons:

.button-group .btn {
    border-color: grey;
    padding: 1rem;
}
.button-group .btn-primary {
    background: #2196F3;
    border-color: blue;
}


I have tried, without success, to change the startup rule using :not() :

.modal:not(.button-group) * {
    all: unset;
}

.modal *:not(.button-group) {
    all: unset;
}

.modal * :not(.button-group) {
    all: unset;
}

I don't know if it can be done or if there is another way.


edited

I am making a library to use in multiple cases. Initially to add to projects designed with Bootstrap without having to make many changes when "decoupling" Bootstrap , but they would coexist for a while. It may be used with other libraries and with/without Bootstrap , it's just visually based on Bootstrap .

This is the actual code , the HTML is in the "examples" folder.

css

2 Answers

  1. Best Answer

    As you have stated, the styles .button-group .btnabove should be applied to the ones of .modal *since the first ones have more specificity. If the border color is not being applied to you, it is because by making all: unset;all the elements have a parent, .modalyou are removing the border-withand the button from the button border-style, which are necessary for the border to be displayed.

    Not having a minimum and verifiable example, I have made a quick example:

    .modal * {
    all: unset;
}

.button-group .btn {
  background: #2196F3;
  border-color: red;
  border-width: 2px;
  border-style: solid;
  padding: 1rem;
}
    <div class="modal">
  <p>Párrafo</p>
  <div class="button-group">
    <button class="btn">Botón</button>
  </div>
</div>

    Comment

    Making use of all: unset;seems quite drastic to me (since this rule also loads the styles that browsers give by default to certain elements and that are almost a standard: how to treat them <p>as a block element). I would rethink the problem you have to try to find another solution.

    • 1

  2. I don't see why it is necessary to do it that way, that is, the style sheets are read in cascade , unless the specificity dictates otherwise.

    Where the style that is read last will be the one that is applied to the selector that you indicate, that is:

    If I have a modal with these styles that bootstrap loads

    .modal-class {
    color: red;
    background-image: urk(algo);
}

    But then I override that behavior and with a second sheet that I call after the framework call I write my own:

    .modal-class {
    color: black;
    background-image: urk(otro);
}

    These should be taken by the browser and be the ones applied to your modal

    On the other hand, I don't see much point in using this rule either: .modal *trying to select all the elements, because if the main container of your modal is the one with the class, .modalthen invoking that class should be enough to modify the styles of both that container as well as subsequent elements.

    So I consider that if you have:

    • Your Bootstrap file call
    • Then you call your custom css file
    • Invoke the modal through its class without applying any override rule and only declare custom styles to that element
    • 1