2

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 in

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

4
  • ¿Existe alguna razón por la que no quieras darle más especifidad?
    – phpMyGuel
    el 23 mar. 2020 a las 11:08
  • ¿Intentaste con .modal :not(.button-group){ all: unset; } ?
    – Sal
    el 23 mar. 2020 a las 12:08
  • para ver lo que funciona podrías probar un borde rojo por ejemplo .modal div:not(.button-group) * { border:5px solid red; }
    – enxaneta
    el 23 mar. 2020 a las 12:46
  • @Sal tu regla borra todos los estilos dentro del modal excepto los propios del elemento con la clase .button-group, si los de los hijos de este.
    – Orici
    el 23 mar. 2020 a las 22:43

2 respuestas 2

1

Tal y como lo tienes planteado debería de aplicarse los estilos de .button-group .btn por encima de los de .modal * al tener los primero más especifidad. Si el color de borde no se te está aplicando es porque al hacer all: unset; a todos los elementos que tengan como padre a .modal le estás quitando al botón el border-with y el border-style, necesarios para que el borde se muestre.

Al no tener un ejemplo mínimo y verificable he fabricado un ejemplillo rápido:

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

Comentario

Hacer uso de all: unset; me parece algo bastante drástico (ya que esta regla se carga también los estilos que los navegadores dan por defecto a ciertos elementos y que son casi un estandar: como tratar a los <p> como un elemento de bloque). Yo me replantearía el problema que tienes para tratar de buscar otra solución.

4
  • He usado all: unset; para este caso porque no maqueto mucho y no conozco otras reglas que me puedan servir. Estoy un poco dando palos de ciego. Esto lo "probé", pero importando estilos y no funcionaba, es decir: tal como lo tienes funciona: si se declara el borrado y después el estilo a aplicar a los botones en la misma hoja, o en el mismo documento HTML, pero no funciona al importar la hoja con el borrado y después importar la hoja con el estilo de los botones... no se porque... Si funcionará así no habría problema.
    – Orici
    el 23 mar. 2020 a las 14:50
  • Quizás en alguna de las hojas de estilo que cargas existan otras reglas que estén afectando a los elementos, o que una de las hojas no la estés cargando correctamente. ¿Cómo estás cargando la hojas de estilo y en qué orden?
    – phpMyGuel
    el 23 mar. 2020 a las 15:30
  • Correcto, no estaba cargando la hoja de estilos de los botones, una letra mal escrita :S. Tipico error que te vuelves loco y no sabes porque... Funcionando.
    – Orici
    el 23 mar. 2020 a las 22:29
  • Parece que aun poniendo el estilo para los botones primero funciona. Esta regla tiene mayor especificidad que el borrado que hice.
    – Orici
    el 23 mar. 2020 a las 22:46
1

No veo por que la necesidad de hacerlo de esa forma, es decir las hojas de estilos se leen en cascada, salvo que la especificidad dicte otra cosa.

Donde el estilo que se lea al último será el que se aplique al selector que tu le indiques, es decir:

Si yo tengo un modal con estos estilos que carga bootstrap

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

Pero después anulo ese comportamiento y con una segunda hoja que invoque después del llamado al framework yo escribo los propios:

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

Debería tomar estos últimos el navegador y ser los que se apliquen a tu modal

Por otro lado tampoco le veo mucho sentido a usar esta regla: .modal * tratando de seleccionar todos los elementos, pues si el contenedor principal de tu modal es el que tiene la clase .modal entonces con invocar a dicha clase debe alcanzar para modificar sus estilos tanto de ese container como de los elementos subsecuentes.

Entonces considero que si tienes:

  • Tu llamado al archivo de Bootstrap
  • Después invocas a tu archivo css personalizado
  • Invoques al modal por medio de su clase sin aplicar alguna regla de anulamiento y solo a ese elemento le declares estilos personalizados
1
  • Correcto, suelo sobreescribir los estilos, es lo más habitual. En este caso como no se exactamente que voy a heredar y no quiero estar mirando en cada caso he probado una opción más radical. El objetivo es que todo el modal haya que maquetarlo de la forma deseada sin que estilos heredados interfieran con algún elemento. De todos modos colocando los estilos que tengo en cascada es suficiente, no me funcionaba por un error tonto al tratar de cargar los estilos de los botones. Ya esta resuelto, muchas gracias.
    – Orici
    el 23 mar. 2020 a las 22:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.