Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / CSS / Como seleccionar un elemento en CSS si no sabemos su Clase o Identificador

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

enero 16, 2020 Por Oscar martin Deja un comentario

Suscríbete a mi canal:  

Recursos Utilizados:

Ayuda en Stackoverflow

Ayuda en CSS Selector Reference

Transcripción del Vídeo

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 😉

¿Quieres aprender más? Entra en la Zona Premium

Publicado en: CSS

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR