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 Modificar con CSS un Elemento si NO tenemos una Clase o Identificador con Pseudo-Clases

Como Modificar con CSS un Elemento si NO tenemos una Clase o Identificador con Pseudo-Clases

marzo 16, 2022 Por Oscar martin Deja un comentario

En muchas ocasiones quieres modificar con CSS un elemento de tu web pero cuando lo vas a hacer te das cuenta que el elemento no tiene ninguna clase ni identificador.

No te preocupes que no está todo perdido.

Gracias a las PseudoClases podemos hacer mucho más de lo que imaginas y en este tutorial vamos a ver como hacerlo.

Tabla de Contenidos

  • 📺️ Tutorial en Vídeo:
  • :first-of-type Modificar Sólo el Primer elemento
  • :last-of-type Modificar Sólo el Último Elemento
  • :nth-of-type Modificar el Elemento o Elementos que Queramos
    • Crear patrones con :nth-of-type en Elementos Pares
    • Crear patrones con :nth-of-type en Elementos Impares
  • Añadir Cambios de CSS a WordPress
  • Bonus Track: Añadir una Pseudo-Clase a un Elemento Hijo

Todo lo que vamos a ver en este tutorial nos sirve para cualquier página que hagas con HTML y CSS.

Y concretamente, por supuesto que vale para WordPress, de hecho en nuestros ejemplos lo haremos en WordPress.

📺️ Tutorial en Vídeo:

Suscríbete a mi canal:  

:first-of-type Modificar Sólo el Primer elemento

Esta pseudo-clase nos permite modificar solo el primer elemento de su tipo entre un grupo de elementos hermanos.

Ahora vamos a ver ejemplos concretos pero aquí tienes un ayuda muy buena sobre esta pseudoclase.

Lo primero que vamos a modificar es el primer elemento de un menú:

Captura de una cabecera, señalando el primer elemento

Normalmente lo que hago cuando quiero modificar algo es entrar en el inspector de elementos de mi navegador (botón derecho –> Inspeccionar) y comprobar si el elemento a modificar tiene una clase o un identificador:

captura de pantalla del inspector de elementos, señalando el identificador del primer elemento

El elemento que quiero modificar tiene un identificador concreto por lo que realmente no necesitaría hacer uso de las pseudoclases.

Pero imaginad que lo habéis visto y que yo no sé que sí tiene identificador 🙈

Voy a modificar ese elemento como si no existiera ese identificador.

Para hacer uso de las pseudo-clases tengo que añadir la pseudoclase precedida de dos puntos:

#top-menu li:first-of-type {
    margin-right: 140px;
}
captura de css para modificar con first-of-type el margen del primer elemento

Y el resultado es:

captura de pantalla de la cabecera señalando el margen derecho del primer elemento

Como podemos ver en la captura de pantalla anterior solo hay se ha aplicado el margen derecho al primer elemento.

:last-of-type Modificar Sólo el Último Elemento

De la misma forma que en el ejemplo anterior podemos modificar solo el último elemento.

En esta ocasión usaremos :last-of-type de la siguiente forma:

#top-menu li:last-of-type {
    margin-right: 140px;
}
captura de css para modificar con first-of-type el margen del último elemento

Y el resultado sería:

captura de pantalla de la cabecera señalando el margen derecho del último elemento

:nth-of-type Modificar el Elemento o Elementos que Queramos

Esta pseudo-clase es muy potente porque podemos hacer referencia a cualquier elemento concreto que queramos o crear patrones para que se seleccionen varios elementos.

Imaginemos que necesito modificar el segundo elemento de mi menú, para ello usaríamos nth-of-type de la siguiente forma:

#top-menu li:nth-of-type(2) {
    margin-right: 140px;
}
captura de css para modificar con nth-of-type el margen del segundo elemento

captura de pantalla de la cabecera señalando el margen derecho del segundo elemento

Crear patrones con :nth-of-type en Elementos Pares

Si en vez hacer referencia a un elemento en concreto queremos hacer referencia a un elemento cada n elementos lo haríamos así:

#top-menu li:nth-of-type(2n) {
    margin-right: 140px;
}
patrón en los elementos pares

Y el Resultado sería aplicar margen al segundo elemento y al cuarto:

captura de pantalla de la cabecera señalando el margen derecho del segundo elemento y el cuarto

Crear patrones con :nth-of-type en Elementos Impares

De la misma forma podemos hacer referencia a los elementos impares de la siguiente forma:

#top-menu li:nth-of-type(2n+1) {
    margin-right: 140px;
}
patrón en los elementos impares

Y el resultado sería:

captura de pantalla de la cabecera señalando el margen derecho del primer elemento y el tercero

Añadir Cambios de CSS a WordPress

Hemos estado haciendo cambios de CSS en el inspector de elementos. Y esto está genial para probarlo pero en cuanto refresquemos la página desaparecerán los cambios ya que estos cambios no están guardados dentro de la web, sino en nuestro propio navegador.

Para añadir los cambios a WordPress hay un montón de formas, desde modificar el fichero CSS de nuestra plantilla a usar el propio interfaz de WordPress.

Nosotros vamos a usar el propio interfaz de WordPress, para ello vamos al menú Personalizar –> Añadir CSS adicional:

captura de pantalla del menu de personalizar de WordPress

Hacemos click y llegamos a la pantalla donde tenemos que añadir el CSS:

captura de pantalla del menu de WordPress para añadir CSS adicional

Bonus Track: Añadir una Pseudo-Clase a un Elemento Hijo

Como hemos visto, estas Pseudo-Clases nos permiten modificar de forma sencilla elementos hermanos, es decir, elementos que están al mismo nivel.

Pero imaginemos que queremos cambiar el color de los elementos impares de nuestro menú.

El color no está definido en el elemento de lista (li) sino en el elemento enlace (a) que está dentro del elemento de la lista:

Si miramos el inspector de elementos:

captura inspector elementos con el menú principal de la web

Si nos fijamos, vemos que no podríamos crear el patrón de la siguiente forma:

#top-menu li a:nth-of-type(2n+1) {
    color: red;
}

Ya que cada enlace está en un li distinto todos serían el primer elemento y se cambiarian de color todos:

captura de pantalla del menú con color rojo todos los elementos del menú

Lo que tendríamos que hacer es aplicar el patrón con la seudo clase al elemento li de la siguiente forma:

#top-menu li:nth-of-type(2n+1) a {
    color: red;
}
Captura de pantalla de la regla con pseudoclases del inspector de elementos

Dándonos como resultado lo que realmente queríamos:

captura de pantalla del menú con color rojo los elementos impares

Como hemos podido comprobar, no es el fin del mundo si no tenemos un identificador o una clase.

Gracias a las pesudoclases podemos acceder a casi cualquier elemento de nuestro HTML.

Espero que te haya gustado 😉

Publicado en: CSS Etiquetado como: Pseudo-Clases

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 *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿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