4Geeks logo
4Geeks logo

Bootcamps

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Academia

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

Dominando los Selectores de CSS

¿Por qué Necesitamos Aprender Acerca de los Selectores?
Selectores de Pseudoclases

¿Por qué Necesitamos Aprender Acerca de los Selectores?

Completar una hoja de estilo es como tener una pequeña guerra entre selectores, estás constantemente anulando los estilos previamente definidos con nuevos:

1/* Primero quieres que todas las H2 tags sean font-size: 14px y de color: blue; */ 2h2 { 3 font-size: 14px; 4 color: blue; 5} 6 7/* Pero luego tienes una página muy particular donde el fondo también es azul, así que necesitas que tus encabezados sean blancos */ 8 9h2 { 10 color: white; 11}

Esto sucede todo el tiempo y, en algún punto, puede ser difícil anular los estilos anteriores. Debes organizar tus estilos adecuadamente y empezar desde lo menos específico hasta los más especifico.

Estos selectores "muy específicos" te ayudarán mucho. ¡Serán tu mejor herramienta para luchar contra tu guerra de estilos!

📺  Aquí hay un vídeo muy bueno (3:40 min) explicando especificidad.

El Selector Child (hijos)

1#someDiv > p { 2 color: blue; 3}

Esta declaración toma los tags de párrafo que son hijos (children) del div y los pinta de azul. Ten en cuenta que solo funciona para los hijos de ese div, no necesariamente para todos los descendientes. Exploremos esto más a fondo con el siguiente ejemplo.

El Selector de Parientes Adyacentes (hermanos)

1p + p { 2 color: red; 3}

Usamos el selector de parientes adyacentes para cambiar el segundo y tercer párrafo a rojo. Esto parece muy complicado, ¿no es así? Instintivamente, esperaríamos que el primer párrafo también fuera rojo. Después de todo, el primer párrafo está en el mismo nivel del árbol que los dos siguientes y, tiene parientes.

Sin embargo, este selector solo se aplica a elementos que están precedidos por otra cosa. En este caso, solo se aplicará a los párrafos precedidos directamente por un párrafo pariente.

El primer párrafo de la lista está precedido por el div, por lo que no se modifica.

El Todopoderoso Asterisco

1#someDiv * { 2 color: red; 3}

El CSS anterior convierte a todos los elementos dentro de un div específico a color rojo, esto incluye elementos como enlaces que tienen un color predeterminado establecido a otra cosa y no se verían afectados simplemente por apuntar al div.

1div * p { 2 color: red; 3}

Puedes llevar esto tan lejos como quieras; los siguientes objetivos son los "nietos" del div. Encontrarás este método de encadenamiento frecuentemente en los trucos de depuración de CSS.

Selector de Valor de Atributo

1a[href='http://4geeksacademy.com/'] {color: blue;}

Si queremos cambiar el color de fuente del enlace "4Geeks", podríamos usar pseudo selectores. Sin embargo, hacerlo supondría que la lista se mantenga en ese orden y que el soporte del navegador no es el mejor. En su lugar, lo que podemos hacer es usar un selector de atributos para dirigirnos al href específico en el que estamos interesados.

Selector de Valor de Atributo de Subcadena Arbitraria

1div[id*='section'] {color: red;}

El siguiente código apunta a cualquier div con la palabra "section" en el título. Puede ser la "section3" o la "section-Four", no importa. Mientras contenga la cadena indicada, se aplicarán los estilos posteriores.

Selectores de Pseudoclases

Pseudoselectores Relacionados con Enlaces

1a:link{color: green;} 2a:visited{color: yellow;} 3a:hover{color: blue;} 4a:active{color: red;}

Puedes cambiar los colores de cualquier elemento del sitio web, dependiendo de su estado:

  • :link será el predeterminado.

  • :visited es autoexplicativo.

  • :hover cuando el cursor está encima.

  • :active cuando el cursor hace clic en él.

Pseudoselectores Relacionados con Campos de Entrada (input)

1input {padding: 5px;} 2input:disabled { 3 background: #ddd; 4 color: #949494; 5 border: 2px solid black; 6} 7input:focus {font-size: 2em;} 8input:enabled {border: 2px solid black;}

Es muy importante tomarse el tiempo suficiente para darle estilo a nuestros formularios. El Styling (estilo) es la mejor manera de decirle al usuario que un campo está desactivado, marcado o que tiene el cursor enfocado en un campo en particular.

Pseudoselectores Según Posición

1#myUL li:first-child {background: blue;} 2#myUL li:nth-child(3) {background: orange;} 3#myUL li a:first-of-type {background: green;}

Puedes aplicar estilos a los elementos según su posición.

Aquí Hay Una Lista de las Pseudo-Clases más Usadas:

SelectorEjemploDescripción del Ejemplo
:activea:activeSelecciona el enlace activo
:checkedinput:checkedSelecciona cada elemento <input> marcado
:disabledinput:disabledSelecciona cada elemento <input> deshabilitado
:emptyp:emptySelecciona cada elemento <p> que no tenga hijos
:enabledinput:enabledSelecciona cada elemento <input> habilitado
:first-childp:first-childSelecciona cada elemento <p> que sea el primer hijo de su padre
:first-of-typep:first-of-typeSelecciona cada elemento <p> que sea el primer elemento <p> de su padre
:focusinput:focusSelecciona el elemento <input> que tiene el foco
:hovera:hoverSelecciona enlaces sobre los que está el cursor
:in-rangeinput:in-rangeSelecciona elementos <input> con un valor dentro de un rango específico
:invalidinput:invalidSelecciona todos los elementos <input> con un valor no válido
:lang(language)p:lang(it)Selecciona cada elemento <p> con un valor de atributo que comience con "it"
:last-childp:last-childSelecciona cada elemento <p> que sea el último hijo de su padre
:last-of-typep:last-of-typeSelecciona cada elemento <p> que sea el último elemento <p> de su padre
:linka:linkSelecciona todos los enlaces no visitados
:not(selector):not(p)Selecciona cada elemento que no sea un elemento <p>
:nth-child(n)p:nth-child(2)Selecciona cada elemento <p> que sea el segundo hijo de su padre
:nth-last-child(n)p:nth-last-child(2)Selecciona cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)p:nth-last-of-type(2)Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre, contando desde el último hijo
:nth-of-type(n)p:nth-of-type(2)Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre
:only-of-typep:only-of-typeSelecciona cada elemento <p> que sea el único elemento <p> de su padre
:only-childp:only-childSelecciona cada elemento <p> que sea el único hijo de su padre
:optionalinput:optionalSelecciona elementos <input> sin atributo "requerido"
:out-of-rangeinput:out-of-rangeSelecciona elementos <input> con un valor fuera de un rango especificado
:read-onlyinput:read-onlySelecciona elementos <input> con un atributo "readonly" especificado
:read-writeinput:read-writeSelecciona elementos <input> sin atributo "readonly"
:requiredinput:requiredSelecciona los elementos <input> con un atributo "requerido" especificado
:rootrootSelecciona el elemento raíz del documento
:target#news:targetSelecciona el elemento #news actualmente activo (haciendo click en una URL que contiene ese nombre de ancla)
:validinput:validSelecciona todos los elementos <input> con un valor válido
:visiteda:visitedSelecciona todos los enlaces visitados

🔗 Esta es una excelente lectura sobre los selectores de CSS: Los 30 selectores de CSS que debes memorizar