El elemento .not no funciona en input / the pseudo-element -not is not working on input

Tell us what’s happening:

Estoy tratando de modificar la fuente de un fieldset que contiene varios label con sus respectivos inputs. El caso es que uno de esos inputs quiero que permanezca sin modificar, por lo que creo que debo usar el pseudo-elemento :not. Sin embargo, no consigo hacer que funcione y no encuentro el error. En caso de estar mal la sintaxis, por favor indíquenme cómo se corrige. Gracias!

EN HTML:

                     <fieldset id="fieldset">
					<legend id="legend">What's your cat's personality?</legend>
					<label for="loving">
						<input id="loving" type="checkbox" name="personality" 
                                                 value="loving">Loving
                                            </label>
                                           <label for="lazy">
						<input id="lazy" type="checkbox" name="personality" 
                                                     value="lazy">Lazy
					</label>
					<label for="energetic">
						<input type="checkbox" id="energetic" name="personality" 
                                                     value="energetic">Energetic
					</label>
		 </fieldset>

EN CSS:

#fieldset input:not(#loving){
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
}

Hola,
El problema en su situación es que está intentando cambiar la fuente seleccionando el elemento input, mientras que el texto está contenido en label. Para hacer esto, puedes por ejemplo usar un selector de atributos, como este:

#fieldset label:not([for="loving"]) {
    font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
}

Ah ya entiendo. Había intentado eso anteriormente pero seguí haciendo la modificación en el input sin tener en cuenta el atributo “for”. Muchas gracias por tu ayuda. Tema resuelto. Saludos!!

Excelente !
Recuerda marcar mi post como “solución” para que el tema quede cerrado :slight_smile:

1 Like