La semana pasada en Selección múltiple con patrones en CSS explicaba como aplicar estilos a multiples elementos por medio de patrones. Pero ¿que sucede si dentro de ese grupo de elementos hay algunos a los cuales no queremos que se aplique ese estilo? Voy a poner un ejemplo donde nos podemos encontrar con esa situación, supongamos que estamos utilizando bootstrap 3 en nuestra web, y tenemos un formulario en el cual queremos poner un asterisco rojo delante de todos los elementos obligatorios, una manera sencilla y rápida para hacerlo es con CSS, aplicando un simple estilo
label.required:before {
content: "*";
color: red;
}
Con esta regla lo que hacemos es antes de cada label(con el pseudo selector before, si quisiéramos que fuera después lo sustituiríamos por :after) que sea de la clase required le agregamos un * de color rojo. Según como tengamos diseñado el formulario, y si estamos usando elementos radio, nos podemos encontrar que delante de cada etiqueta de radio nos ha puesto el asterisco, para solucionar esto podemos usar el pseudo selector :not de la siguiente manera:
label:not(.radio).required:before {
content: "*";
color: #ff3b30;
}
Espero que os sea de utilidad.
rubenlacasa.es 