excluyendo nombres de clase específicos en selectores CSS

en CSS, hay casos en los que es posible excluir los nombres de clases particulares de sus selectores. Esto es especialmente útil cuando desea aplicar estilos a múltiples elementos, pero ciertos no deben heredar esos estilos.

un escenario común implica excluir elementos con un nombre de clase específico al aplicar estilos a elementos con otro nombre de clase. Consideremos el siguiente ejemplo:

    Design



    Design

En este ejemplo, queremos aplicar un color de fondo a los elementos con el nombre de clase "Remode_Hover" en Hover. Sin embargo, no queremos aplicar este color si el elemento también tiene el nombre de clase "Remode_Selected".

/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

.reMode_hover:hover { background-color: #f0ac00; }

mientras puede esperar que la primera regla funcione, no lo hace. Esto se debe a que en CSS, el espacio entre nombres de clase denota el selector descendiente. Entonces, ".remode_selected .remode_hover" se traduce como "seleccione .remode_Hover Elementos que son descendientes de .remode_selected."

para excluir correctamente los elementos "remode_selected", necesitamos usar el selector "not ()". El CSS actualizado sería:

.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }

Esta regla aplicará el color de fondo a los elementos .remode_hover que no tienen el nombre de clase .remode_selected. Como resultado, solo el primer enlace recibirá el color de fondo en Hover, mientras que el segundo enlace no lo hará.