4Geeks logo
4Geeks logo
Sobre Nosotros

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

Data Science and Machine Learning - 16 wks

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

De cero a que te paguen como desarrollador, aprende las habilidades del presente y del futuro. Impulsa tu carrera profesional y sé contratado por una empresa tecnológica.

Empezar a programar

← Regresar a lecciones
Editar en Github

Dominando los Selectores de CSS

¿Por qué necesitamos aprender acerca de los selectores?
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 dices que quieres que todas las H2 tags sean font-size: 14px y de color: azul; 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 convierte en azules. 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.

Clic aquí para abrir demo en una nueva ventana

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.

Clic para abrir el demo en una nueva ventana

El todopoderoso asterisco

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

El CSS anterior convierte a todos los elementos dentro de un div rojo específico, 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.

Haz clic aquí para abrir el demo en una nueva ventana
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.

Haz clic para abrir el demo en una nueva ventana

Selector de valor de atributo

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

Si queremos cambiar el color de fuente del enlace "Design Shack", 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.

Clic para abrir el demo en una nueva ventana

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.

Haz clic aquí para abrir el demo en una nueva ventana

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.

Haz clic aquí para abrir el demo en una nueva ventana

Pseudoselectores relacionados con la 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.

Haz clic aquí para abrir el demo en una nueva ventana

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.

Presiona aquí para abrir la demo en una nueva ventana

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