Quiero aplicar estilos personalizados a todos los elementos de un modal. Primero trato de anular todos los estilos que puedan venir "heredados" para la clase "modal", por ejemplo, por si uso Bootstrap.
Entonces tengo la siguiente regla:
.modal * {
all: unset;
}
Ahora le daría estilos propios a cada elemento del modal. Problema: también cargo mis propios estilos en otras hojas, por ejemplo para botones, con lo que la regla anterior los anula. Quisiera poder aplicarlos sin aumentar la especificidad o añadir !important en todos estos estilos que voy a cargar. Por ejemplo usaría este HTML para un botón (que esta bajo la clase modal):
... Sign inY el CSS de los botones:
.button-group .btn {
border-color: grey;
padding: 1rem;
}
.button-group .btn-primary {
background: #2196F3;
border-color: blue;
}
He probado, sin éxito, a cambiar la regla de inicio usando :not():
.modal:not(.button-group) * {
all: unset;
}
.modal *:not(.button-group) {
all: unset;
}
.modal * :not(.button-group) {
all: unset;
}
No se si se puede hacer o hay otra forma.
Editado
Estoy haciendo una librería para usar en múltiples casos. Inicialmente para añadir a proyectos maquetados con Bootstrap sin tener que hacer muchos cambios a la hora de "desacoplar" Bootstrap, pero convivirían un tiempo. Pueden que se use con otras librerías y con/sin Bootstrap, solo que visualmente se basa en Bootstrap.
Este es el código actualmente, el HTML esta en la carpeta "examples".
.modal :not(.button-group){ all: unset; }
?.modal div:not(.button-group) * { border:5px solid red; }
.button-group
, si los de los hijos de este.