Selectores de CSS

Ahora que tiene claro qué es el lenguaje CSS y para qué sirve, e incluso cómo añadirlo en tu código, ¡solo tenemos que llegar al meollo del asunto! 

Cómo escribir el lenguaje CSS: la sintaxis CSS

Hemos constatado que CSS es un lenguaje de estilo: como la propia palabra sugiere, por lo tanto, estamos ante un lenguaje real, es decir, un código de comunicación que te permitirá hablar con tu máquina. Trata de pensar en el idioma español: se compone de reglas gramaticales; como cualquier lenguaje, por lo tanto, CSS consistirá en reglas. Cuando hablamos de las reglas para escribir un lenguaje de programación, nos referimos a su sintaxis. ¡Vamos a explorarlo!

Una regla CSS consta de dos partes: selector (la parte a la que queremos aplicar la regla css) y una o más declaraciones (es decir, parejas formadas por una propiedad css y un valor, que debe terminar en punto y coma).

selettore {
   propriedad: valor;
}

Los selectores

Los selectores de CSS nos permiten seleccionar el elemento o elementos a los que queremos aplicar el estilo.

Son diferentes y tienen un peso diferente, una importancia diferente, una "especificidad" diferente, en la jerga: no te preocupes si no comprendes este concepto de inmediato, lo veremos en las próximas guías. ¡Ocupémonos, en cambio, de conocer más de cerca a nuestros selectores! 

Selectores universales

* {
  font-family: Arial, Helvetica, sans-serif;
}

El selector universal selecciona cualquier elemento de la página y, de hecho, se usa muy poco porque es muy débil como selector: tiene una especificidad equivalente a cero. Esto significa que se sobrescribe con cualquier otro selector.

Se indica con un asterisco y es, sin embargo, muy útil cuando necesitamos, por ejemplo, definir la fuente global de nuestra página html. 

Selector tag HTML : element type 

p {
  color: red;
}

Este selector selecciona todos los elementos que tienen la etiqueta de nombre dada. En este caso específico, todas las etiquetas <p> de tu página HTML tendrán un color rojo.
Pero si, por ejemplo, hubiera habido una "h2" en lugar de una "p", todas las etiquetas <h2> de tu página habrían tenido ese color. 

Selector clase

.myClass {
   color: orange;
   font-size: 20px;
}

Con este selector podemos seleccionar cada elemento HTML con un atributo de "clase" específico.
¿Como funciona?

Veamos primero la sintaxis en CSS:
En primer lugar, es necesario especificar que tú serás quien determine el nombre de tu clase, pero nuestra sugerencia es asegurarse de que haya tantos hablantes como sea posible. ¿Qué significa? 

Supongamos que deseas dar a más elementos de tu hoja html el color gris: lo que hará es llamar a su clase "color-gris"; es en este sentido que definimos la clase hablante, porque literalmente nos dice cuál será su función.
Esta es práctica extremadamente útil, ya que si trabajas en equipo te encontrarás en la situación en la que más personas trabajarán en el mismo código que tú y, por lo tanto, es fundamental que esto también sea comprensible para otros profesionales.
En la hoja html, simplemente tienes que añadir un atributo de "clase" en la etiqueta que te interesa e indica las clases que prefieres como el valor de este último.

No usamos el plural por casualidad: ¡de hecho, puedes usar más de una clase para el mismo elemento! Simplemente escríbelos uno al lado del otro como los valores de su atributo de "clase", como en este ejemplo: 

<p class="text-red font-lg"> Ejemplo </p>

En cambio, en la hoja CSS deberás añadir el nombre de la clase precedido por un punto e ingresar, como una declaración, todas las propiedades que desea cambiar. Ejemplo:

Ejemplo:  

.text-red {
   color: red;
}

.font-lg {
   font-size: large;
}

¿Cuál es la fuerza de una clase? Acabas de crear tu clase .color-gray; puedes dar esta clase a todos los elementos que deberían, en tu opinión, tener el color gris, en lugar de usar un selector genérico como el de etiqueta o demasiado específico como el de id -que veremos en breve- y escribir un mucho menos código. 

Selector ID

#titulo {
   color: red;
}

ID: este selector identifica un ÚNICO elemento. Por lo tanto, selecciona solo uno. Para simplificar el concepto, es como si el ID fuera un documento de identidad: sólo hay uno por elemento.
El ID está presente en nuestra página html como el valor del atributo "ID" de una etiqueta, que luego recordaremos en nuestra hoja CSS usando el símbolo "#" para usarlo como selector.

En la hoja html puede haber varios id pero todos diferentes, nunca dos iguales.

Intentemos referirnos al ejemplo anterior, en el que todos los párrafos de nuestro código tomaron color rojo. Por ejemplo, si quisiéramos darle a uno solo de ellos el color azul, idealmente podríamos asignar el valor "blueP" al atributo ID de la etiqueta html de ese párrafo específico y usarlo como selector en nuestro CSS de la siguiente manera: 

En HTML veremos: 

<p id=”blueP”> Ejemplo </p>

En CSS veremos:

#blueP {
   color: blue;
}

En este punto, el párrafo al que le hemos asignado el ID "blueP" se volverá azul.
¡Ojo! También para el nombre del valor que le quieres dar al atributo ID se aplica la misma regla que para las clases: ¡siempre es mejor que sea parlante!

¡Pero el mundo de los selectores no deja de sorprender!

Podemos, de hecho, concatenar múltiples selectores.
Mira el ejemplo de abajo: 

p.text-red {
   color: red;
   font-size: 15px;
}

Como puede ver, usamos "p.text-red" como selector. Estamos indicando, de esta manera, que solo los párrafos que tienen la clase text-red tendrán ciertas características, todos los demás elementos que tienen solo la clase text-red, en cambio, no las tendrán.

Además de este modo, tenemos varios otros para concatenar selectores:

Selectores de descendientes (descendant selector) 

#contactForm input {
   font-size: 32px;
}

El selector de descendientes te permite seleccionar un elemento que es descendiente de otro.
En el siguiente ejemplo, puedes notar fácilmente una cosa: entre nuestro selector de ID y el selector para la entrada de etiquetas hay un espacio vacío: ese espacio debe parafrasearse como si estuviera escrito "dentro".
Entonces, leeremos esta regla CSS así:
"Todas las entradas dentro de la etiqueta con el ID" contactForm "deben tener estas características"

No te confundas con nuestro ejemplo: para usar el selector descendiente, simplemente separa dos selectores de cualquier tipo con un espacio. 

Selectores de elementos secundarios (Child selector) 

p > span { 
    color: red; 
}

El selector de elementos secundarios se utiliza para seleccionar los elementos secundarios directos de un elemento principal.

Analicemos bien la frase: en nuestro ejemplo anterior, el elemento principal es la 'p' (a la derecha de>) y el elemento secundario es el intervalo (a la izquierda de>); pero que significa hijo directo (elemento principal)? Por "hijo directo" entendemos sólo el "primogénito", es decir sólo el elemento inmediatamente dentro del paterno.

Otro ejemplo podría ser útil: 

<div>
   <p> 
       hola a <span> todos </span> 
   </p>
</div>

El hijo directo, en este caso, será solo la etiqueta p, ya que está dentro de la etiqueta div padre; la etiqueta span, dentro de la p, estará separada de la etiqueta div por la propia etiqueta p. Entonces, para ir y seleccionar el intervalo, nunca podemos usar el selector secundario de la siguiente manera: 

div > span { 
    color: red; 
}

¿Por qué no? Porque en nuestro ejemplo, el intervalo no es inmediatamente interno a la etiqueta div, por lo que no es su elemento secundario directo. 

Selectores de hermanos ( adjacent sibling selector )  

p + p { 
    font-weight: bold; 
}

El selector de hermanos te permite seleccionar un elemento (a la derecha del símbolo +) colocado inmediatamente después de otro (a la izquierda del símbolo +).
Ten en cuenta el código anterior y, a continuación, mira el html de referencia en paralelo: 

<div>
   <p> Ejemplo 1 </p>
   <p> Ejemplo 2 </p>
   <p> Ejemplo 3 </p>
   <div> Ejemplo 4 </div>
   <p> Ejemplo 5 </p>
</div>

En este caso, por tanto, estaríamos seleccionando -para ponerlos en negrita- todos los párrafos precedidos de otro párrafo: estamos hablando, en concreto, de 'Ejemplo 2' y 'Ejemplo 3' (donde 'Ejemplo 2' sigue <p> 'Ejemplo 1' y 'Ejemplo 3' sigue <p> 'Ejemplo 2')
En su lugar, se excluirá de la selección del 'Ejemplo 5', ya que no está inmediatamente precedido por una etiqueta p, sino que sigue a un <div>.

Puede ser un poco difícil las primeras veces, pero a medida que te familiarices, descubrirás que es más fácil hacerlo que decirlo. 

Selector general de hermanos (General sibling selector)

El selector general de hermanos es muy similar al selector de hermanos que acabamos de ver. La diferencia es que el elemento seleccionado no necesariamente tiene que estar inmediatamente después del primer elemento, sino que puede aparecer en cualquier lugar después de este.
La sintaxis será la siguiente esta vez: 

p ~ p { 
    font-weight: bold; 
}

Si usamos la misma estructura html que el ejemplo anterior, el último elemento <p> ('Ejemplo 5') también será seleccionado por p ~ p, porque está precedido por otro elemento <p>, aunque no directamente. 

Selección múltiple

Finalmente, si queremos, podemos concatenar más selectores, separándolos con una coma, para darles las mismas propiedades css.

h1, h2, h3 {
  color: purple;
}