Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] No funciona selector

El error que cometí fue no tener definido el id="test"...Hagan caso omiso. No logre borrar la entrada.

Hola a todos. Gracias por ver esta pregunta.

En estos códigos el resultado final es que mi código le da prioridad al color darkkhaki en vez del color blueviolet. Podrían ayudarme por favor?

Mi código CSS es:

p{
    color:red;
}

.testColor{
    color: yellow;
}

p.testColor{
    color:darkkhaki
}

#testColor
{
    color: blueviolet;
}

y mi codigo html es:

<form>

            <label for="nombreapellido">Nombre y Apellido</label>
            <input type="text" id="nombreapellido" class="input-padron">

            <label for="correo">Correo Electrónico</label>
            <input type="text" id="correo" class="input-padron">

            <label for="telefono">Teléfono</label>
            <input type="text" id="telefono" class="input-padron">

            <label for="mensaje">Mensaje adicional</label>
            <textarea name="contacto" id="mensaje" cols="70" rows="10" class="input-padron"></textarea>

            <div>

            <p class="testColor">¿Cómo le gustaria que lo contactemos?</p>

            <label for="radioEmail"><input type="radio" value="email" name="contacto" id="radioEmail">Email</label>


            <label for="telefono2"><input type="radio" value="telefono" name="contacto" id="telefono2">telefono</label>


            <label for="whatsapp"><input type="radio" value="whatsapp" name="contacto" id="whatsapp">Whatsapp</label>


            </div>

            <!--Para las etiquetas label actualmente no hay manera de definirles diseño citando la etiqueta, entonces le ponemos una clase-->
            <label class="checkbox"><input type="checkbox">¿Le gustaria recibir novedades?</label>

            <input type="submit" value="Enviar formulario">
        </form>

. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

hola el tema de class vs Id tiene que ver mucho con la Especificidad, porque el uso de id esta mas orientados para usarlo con JavaScript, por ejemplo (acceder al boton por id para que cambie la clase css, realizar alguna animación, etc.).

por ejemplo si tenemos el siguiente código

/*usando las clases es la forma mas practica y recomendable de usar*/
.title{
    color: red;
}


/*el id tiene mayor valor ante todos sobrescribiendo la clase anterior de ejemplo*/
#title{
    color: red;
}

/*en este ejemplo el id  #title sobrescribe a la clase totalmente*/

Especificidad "establece como de especifico, es un selector para saber que estilo aplicar"

se recomienda usar siempre clases

//los números puestos son los valores por el cual calcula su especificidad

etiquetas y pseudoelementos  001

clases, atributos y pseudoclases 010

Ids 100

Estilos en linea 1000

!Important gana a todo

Ahora si mesclas una clase mas una etiqueta obviamente tiene mayor prioridad.

cascada: funciona siempre que la especificidad sobre el elemento sea la misma.

link para saber si se tiene un buen css

https://jonassebastianohlsson.com/specificity-graph/