MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

En nuestro primer artículo sobre selectores estudiaremos los selectores "simples", así llamados porque referencian directamente a uno o más elementos de un documento en función del tipo de elemento(o su class o id).

Selector de elementos (selector de tipos)

Este selector hacer referencia directamente a un tipo de elemento HTML. Es la manera más sencilla para hacer referencia a todos los elementos de un mismo tipo. Veamos el ejemplo:

Dado el siguiente código HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

Una sencilla hoja de estilos:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

Obteniendo el siguiente resultado:

Aprendizaje activo: Selección de diferentes elementos

En este aprendizaje activo, nos gustaría que intentes cambiar el selector en la regla CSS de manera que se aplique a varios elementos. ¿Sabes cómo escribir un selector para que afecte a multiples elementos a la vez?

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

Selectores de clases

El selector de clase se forma con un punto, '.', seguido de un nombre de clase. Un nombre de clase puede ser cualquier valor sin espacios usado dentro de un atributo HTML class. Podemos elegir el nombre que deseemos para la clase. Es conveniente saber que en un mismo documento varios elementos pueden compartir el mismo valor de clase y que un elemento puede tener varios nombres de clases separados por un espacio en blanco. Veamos un rápido ejemplo:

Sea el siguiente código HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

Y un sencillo documento de estilos:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

Obteniendo el siguiente resultado:

Aprendizaje activo: Uso de varias clases

Para este aprendizaje activo, deberás cambiar los atributos de clase a los elementos párrafo de manera que puedan mostrar varios efectos por separado. Aplica una clase de caja-básica (base-box) y una clase específica (editor-note o warning), puedes usar important si quieres dar gran importancia a la caja. Piensa en cómo este tipo de reglas te puede ayudar a construir un sistema modular de estilos.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

Selectores ID

El selector ID está formdo por una almohadilla (#), seguida del nombre ID de determinado elemento. Cualquier elemento puede tener un único nombre ID fijado con el atributo id. Podemos usar cualquier nombre de nuestra elección para el ID. Es la forma más efectiva de selecionar un solo elemento.

Important: El nombre ID debe ser único en el documento. No podemo saber que sucedera con IDs duplicados, en algunos navegadores solo contará la primera ocurrencia, las demás serán ignoradas.

Veamos un rápido ejemplo — dado el código HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

Y un sencillo documento de estilos:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

El resultado será:

Aprendizaje activo: Asignar color al ganador con IDs

En este aprendizaje activo, asignaremos los correspondientes colores oro, plata y bronce al ganador, al segundo y al tercero respectivamente usando reglas CSS y de 2-4 selectores para seleccionar el correspondiente elemento atendiendo a su ID.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

Selector Universal

El selector universal (*) es el comodín. Nos permite seleccionar todos los elementos de una página, se suele usar en combinación con otros selectores (ver Combinators más adelante).

Importante: Cuidado al utilizar el selector universal. Al afectar a todos los elementos, usarlo en grandes páginas web grandes puede afectar al rendimiento, ralentizando el tiempo de carga de las páginas más de lo esperado. No tendremos necesidad de usarlo muy a menudo.

Ahora como ejemplo; dado un código HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

Y su correspondiente hoja de estilos:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Juntos producirán el siguiente resultado:

Combinaciones

En CSS, las combinaciones nos permiten combinar varios selectores juntos, con lo que podremos seleccionar elementos contenidos en otros elementos, o elementos adyacentes a otros. Disponemos de cuatro tipos:

  • El selector descendiente —  (espacio) — permite seleccionar un elemento anidado en alguna parte dentro de otro elemento (no tiene por qué ser un hijo; puede ser un nieto, por ejemplo)
  • El selector hijo — > — permite seleccionar un elemento que es hijo directo de otro elemento.
  • El selector hermano — + — permite seleccionar un elemento que es hermano directo de otro elemento (a la derecha por ejemplo, en el mismo nivel jerárquico).
  • El selector hermano en general — ~ — permite seleccionar cualquier elemento hermano de otro (por ejemplo en el mismo nivel jerárquico, pero no necesariamente adyacente a él).

Veamos un rápido ejemplo para ver el funcionamiento:

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

El resultado será:

Los selectores funcionarán como sigue:

  • section p selecciona todos los elementos <p>  — los dos primeros son hijos directos del elemento <section>, y los dos siguientes son nietos del elemento  <section> (ya que también están dentro de <div>). Todo el texto del párrafo será de color azul.
  • section > p selecciona solo los dos primeros elementos <p>, que son hijos directos del elemento <section> (pero no los dos siguientes, pues no son hijos directos). Por tanto, solo los dos primeros párrafos tendrán realzado amarillo.
  • h2 + p selecciona solo los elementos <p> que están directamente después del elemento <h2> en el mismo nivel jerárquico — en este caso el primer y el tercer párrafo. Así estos tendrán el texto en mayúsculas
  • h2 ~ p selecciona cualquier elemento <p> en el mismo nivel jerárquico desde los elementos <h2> — en este caso todos los párrafos. Todos ellos tendrán el borde punteado.

En el siguiente artículo

¡Enhorabuena por llegar al final del primer tutorial de selectores! Esperamos que te hayas divertido con tu primer encuentro con los selectores — ya has visto los selectores que más se suelen usar, pero veamos ahora algunas características más avanzadas, comenzando con Selectores de atributos.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,