Como seleccionar un elemento en CSS si no sabemos su Clase o Identificador

Hola chicos, ¿Qué tal?

¿En este vídeo vamos a ver cómo podemos modificar el estilo, el diseño de cualquier formulario o cualquier otro elemento de nuestra página web si no tenemos un identificador y una clase.

Vamos a ver cómo hacerlo por css si nos faltan estos elementos, la clase o el identificador.

Es algo que me ha preguntado un alumno y vamos a ver cómo se podría hacer, me aparece muy interesante y por eso os quería mostrar que se hace de una manera muy sencillita, además para hacerlo vamos a usar la ayuda y en este caso vamos a ver que aparte de los identificadores y de las clases podemos hacer llamadas a través de los atributos.

Entonces gracias a esto lo podemos hacer ,que no se asuste todo lo que veis aquí porque lo vamos a hacer de manera muy sencilla, en este caso voy a modificar en esta etiqueta, en la etiqueta nombre pero no quiero que se modifique la etiqueta email entonces si hago clic el botón derecho, inspeccionar puedo ver el código fuente en chrome.

En este caso si os dais cuenta esta etiqueta si tiene una clase pero no voy a hacer uso de ella, imaginad que no tuviera ésta clase, es muy sencillo, de hecho, si yo la seleccionó y aquí hago click en más se me va a generar una regla ya con la clase escrita pero en este caso voy a borrar la clase porque voy a imaginar que no existiera, entonces gracias al atributo, en este caso, FOR que es el atributo que tenemos aquí.

Si nos damos cuenta el atributo tiene el valor de input_2_8 si yo seleccionará por ejemplo la etiqueta de email vemos que es input_2_2, es decir que cada una de estas etiquetas tiene un valor distinto por lo que yo puedo modificar una y no el resto.

Como decía voy a seleccionar en la etiqueta de nombre y vamos a crear una regla, no voy a hacer uso de esta clase y lo que voy a hacer aquí es lo siguiente abro corchetes cierro corchetes y aquí en el medio añado que cuando el atributo for sea igual abro y cierro comillas aunque si no lo hiciera también funcionaría y pongo que es igual a input_2_8 , le voy a decir que quiero que el color sea igual a rojo, es decir, red.

Entonces, fijaros que se ha modificado solo esta etiqueta el resto sigue igual.

He podido usar aquí el label pero haciendo uso de los atributos hemos podido modificar esto y además es muy interesante porque si nos damos cuenta aquí en la ayuda , se puede hacer algo que todavía puede resultar más útil.

Puedo imaginar que solo quiero que se cambie el color o que ponga un icono por ejemplo cuando es un enlace a un pdf o cuando tenga una url concreta por ejemplo como podéis ver aquí entonces podríamos hacer esto para cambiar cualquiera de los atributos en este caso yo voy a hacer uso de esta regla y vais a ver cómo funciona.

Si yo me vengo aquí a mi página aquí vemos que tengo un enlace, en este caso tengo el enlace que está aquí y como veis no tengo ninguna clase, ningún identificador, de este enlace como lo podría modificar, pues fijaros si yo hago clic así en este caso si sólo hago una regla para todos los enlaces se modificarían todos pero yo no quiero que se modifiquen todos quiero que se modifique solo los enlaces que tengan por ejemplo en el enlace escrito comohacerunapagina .

Por ejemplo, yo aquí lo que puedo hacer es abro corchetes y los cierro me gusta cerrarlos al principio para que no se me olvide y le pido que que cuando esté el atributo href y le voy a poner un asterisco, como veíamos en la ayuda, para todo lo que haya aquí en el medio y le voy a decir que , escribo abro corchete y lo cierro pongo href asterisco igual abro y cierro comillas y aquí voy a decir por ejemplo que cabe que esté escrito comohacerunapágina y aquí le voy a decir que quiero que el color sea también rojo por ejemplo y veis que se ha cambiado .

Es más, si yo aquí le digo que se cambien los enlaces cuando el enlace es comohacerunapagina pongo aquí otra cosa, vais a ver que no se cambia porque otra cosa no está escrito ahí en cambio si yo aquí pongo por ejemplo simplemente Comohacerunapagina esto ya va a funcionar.

Entonces podemos ser específicos para que no haya más casos, pero podemos ver que no siempre nos hace falta una una clase o un identificador para poder modificar cosas por css.

Me parece que nos puede sacar de muchos apuros ,por eso os traigo este tutorial, espero que os haya gustado nos vemos el siguiente hasta luego 😉