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.
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.
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.
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.
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.
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.
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.
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.
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.
| Selector | Ejemplo | Descripción del Ejemplo |
|---|---|---|
| :active | a:active | Selecciona el enlace activo |
| :checked | input:checked | Selecciona cada elemento <input> marcado |
| :disabled | input:disabled | Selecciona cada elemento <input> deshabilitado |
| :empty | p:empty | Selecciona cada elemento <p> que no tenga hijos |
| :enabled | input:enabled | Selecciona cada elemento <input> habilitado |
| :first-child | p:first-child | Selecciona cada elemento <p> que sea el primer hijo de su padre |
| :first-of-type | p:first-of-type | Selecciona cada elemento <p> que sea el primer elemento <p> de su padre |
| :focus | input:focus | Selecciona el elemento <input> que tiene el foco |
| :hover | a:hover | Selecciona enlaces sobre los que está el cursor |
| :in-range | input:in-range | Selecciona elementos <input> con un valor dentro de un rango específico |
| :invalid | input:invalid | Selecciona 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-child | p:last-child | Selecciona cada elemento <p> que sea el último hijo de su padre |
| :last-of-type | p:last-of-type | Selecciona cada elemento <p> que sea el último elemento <p> de su padre |
| :link | a:link | Selecciona 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-type | p:only-of-type | Selecciona cada elemento <p> que sea el único elemento <p> de su padre |
| :only-child | p:only-child | Selecciona cada elemento <p> que sea el único hijo de su padre |
| :optional | input:optional | Selecciona elementos <input> sin atributo "requerido" |
| :out-of-range | input:out-of-range | Selecciona elementos <input> con un valor fuera de un rango especificado |
| :read-only | input:read-only | Selecciona elementos <input> con un atributo "readonly" especificado |
| :read-write | input:read-write | Selecciona elementos <input> sin atributo "readonly" |
| :required | input:required | Selecciona los elementos <input> con un atributo "requerido" especificado |
| :root | root | Selecciona el elemento raíz del documento |
| :target | #news:target | Selecciona el elemento #news actualmente activo (haciendo click en una URL que contiene ese nombre de ancla) |
| :valid | input:valid | Selecciona todos los elementos <input> con un valor válido |
| :visited | a:visited | Selecciona todos los enlaces visitados |
🔗 Esta es una excelente lectura sobre los selectores de CSS: Los 30 selectores de CSS que debes memorizar