7 min read

Dominando los Selectores de CSS

Además de dominar las propiedades display y position, aprender a usar selectores de CSS es la habilidad más importante que necesitas desarrollar. No tienes que recordar su sintaxis pero si tenerlos en tu radar para poder desarrollar las estrategias correctas al construir tu hoja de estilos CSS.

¿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:

//Primero dices que quieres que todas las H2 tags sean font-size: 14px y de color: azul;
h2{
    font-size: 14px;
    color: blue;
}

//Pero luego tienes una página muy particular donde el fondo también es azul, así que necesitas que tus encabezados sean blancos;

h2{
    color: white;
}

Esto sucede todo el tiempo y, en algún momento, 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!

El selector de hijos

#someDiv > p {
    color: blue;
}

Esta declaración toma las etiquetas de párrafo que son hijos del div y las 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.

El selector de parientes adyacentes (hermanos)

p + p {
    color: red;
}

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 siguiente 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


#someDiv * {
    color: red;
}

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.

div * p {
    color: red;
}

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

Selector de valor de atributo

a[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.

Selector de valor de atributo de subcadena arbitraria

div[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.

Pseudoselectores

Pseudoselectores relacionados con enlaces

a:link{color: green;}
a:visited{color: yellow;}
a:hover{color: blue;}
a:active{color: red;}

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

  • :link será el predeterminado.
  • :visited es auto-explicativo.
  • :hover cuando el cursor está encima.
  • :active cuando el cursor hace click en él.

Pseudoselectores relacionados con campos de formulario

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

Es muy importante tomarse el tiempo suficiente para darle estilo a nuestros formularios. El 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

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

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

Aquí hay una lista de los pseudoselectores más usados:

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