033.2 Lección 1

Certificación:

Conceptos básicos de desarrollo web

Versión:

1.0

Tema:

033 Estilo de contenido CSS

Objetivo:

033.2 Selectores CSS y aplicación de estilo

Lección:

1 de 1

Introducción

Al escribir una regla CSS, debemos especificarle al navegador a qué elementos se aplica la regla. Lo hacemos especificando un patrón selector: que puede coincidir con un elemento o grupo de elementos. Los selectores vienen en muchas formas diferentes, que pueden basarse en el nombre del elemento, sus atributos, su ubicación relativa en la estructura del documento o una combinación de estas características.

Estilos de toda la página

Una de las ventajas de usar CSS es que no es necesario escribir reglas individuales para elementos que comparten el mismo estilo. Un asterisco aplica la regla a todos los elementos de la página web, como se muestra en el siguiente ejemplo:

* {
  color: purple;
  font-size: large;
}

El selector * no es el único método para aplicar una regla de estilo a todos los elementos de la página. Un selector que simplemente coincide con un elemento por su nombre de etiqueta se denomina selector de tipo, por lo que cualquier nombre de etiqueta HTML como body, p, table, em, etc., se puede utilizar como selector. En CSS, el estilo del padre es heredado por sus elementos secundarios. Entonces, en la práctica, usar el selector * tiene el mismo efecto que aplicar una regla al elemento body:

body {
  color: purple;
  font-size: large;
}

Además, la función en cascada de CSS le permite ajustar las propiedades heredadas de un elemento. Puede escribir una regla CSS general que se aplique a todos los elementos de la página y luego escribir reglas para elementos o conjuntos de elementos específicos.

Si el mismo elemento coincide con dos o más reglas en conflicto, el navegador aplica la regla del selector más específico. Tome las siguientes reglas CSS como ejemplo:

body {
  color: purple;
  font-size: large;
}

li {
  font-size: small;
}

El navegador aplicará los estilos color: purple y font-size: large a todos los elementos dentro del elemento body. Sin embargo, si hay elementos li en la página, el navegador reemplazará el estilo font-size: large por el estilo font-size: small, porque el selector li tiene una relación más fuerte con el li que el selector body.

CSS no limita el número de selectores equivalentes en la misma hoja de estilos, por lo que puede tener dos o más reglas usando el mismo selector:

li {
  font-size: small;
}

li {
  font-size: x-small;
}

En este caso, ambas reglas son igualmente específicas para el elemento li. El navegador no puede aplicar reglas en conflicto, por lo que elegirá la regla que viene más adelante en el archivo CSS. Para evitar confusiones, la recomendación es agrupar todas las propiedades que utilizan el mismo selector.

El orden en el que aparecen las reglas en la hoja de estilos afecta la forma en que se aplican en el documento, pero puede anular este comportamiento utilizando la regla !important. Si, por alguna razón, desea mantener las dos reglas li separadas, pero forzar la aplicación de la primera en lugar de la segunda, marque la primera regla como importante:

li {
  font-size: small !important;
}

li {
  font-size: x-small;
}

Las reglas marcadas con !important deben usarse con precaución, ya que rompen la cascada natural de la hoja de estilos y dificultan la búsqueda y corrección de problemas dentro del archivo CSS.

Selectores restrictivos

Vimos que podemos cambiar ciertas propiedades heredadas usando selectores que coincidan con etiquetas específicas. Sin embargo, normalmente necesitamos usar estilos distintos para elementos del mismo tipo.

Los atributos de las etiquetas HTML se pueden incorporar en los selectores para restringir el conjunto de elementos a los que se refieren. Suponga que la página HTML en la que está trabajando tiene dos tipos de listas desordenadas (<ul>): una se usa en la parte superior de la página como un menú a las secciones del sitio web y el otro tipo se usa para listas convencionales en el cuerpo del texto:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS Basics</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

<div id="content">

<p>The three rocky planets of the solar system are:</p>

<ul>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
</ul>

<p>The outer giant planets made most of gas are:</p>

<ul>
  <li>Jupiter</li>
  <li>Saturn</li>
  <li>Uranus</li>
  <li>Neptune</li>
</ul>

</div><!-- #content -->


<div id="footer">

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

</div><!-- #footer -->

</body>
</html>

De forma predeterminada, cada elemento de la lista tiene un círculo negro a su izquierda. Es posible que desee eliminar los círculos de la lista del menú superior y dejar los círculos en la otra lista. Sin embargo, no puede simplemente usar el selector li porque hacerlo también eliminará los círculos en la lista dentro de la sección del cuerpo del texto. Necesitará una forma de decirle al navegador que modifique solo los elementos de la lista utilizados en una lista, pero no en la otra.

Hay varias formas de escribir selectores que coincidan con elementos específicos de la página. Como se mencionó anteriormente, primero veremos cómo usar los atributos de los elementos para hacerlo. Para este ejemplo en particular, podemos usar el atributo id para especificar solo la lista superior.

El atributo id asigna un identificador único al elemento correspondiente, que podemos usar como parte del selector de la regla CSS. Antes de escribir la regla CSS, edite el archivo HTML de muestra y agregue id="topmenu" al elemento ul utilizado para el menú superior:

<ul id="topmenu">
  <li>Home</li>
  <li>Articles</li>
  <li>About</li>
</ul>

Ya existe un elemento link en la sección head del documento HTML que apunta al archivo de hoja de estilos style.css en la misma carpeta, por lo que podemos agregarle las siguientes reglas CSS:

ul#topmenu {
  list-style-type: none
}

El caracter hash se utiliza en un selector, después de un elemento, para designar un ID (sin espacios que los separen). El nombre de la etiqueta a la izquierda del hash es opcional, ya que no habrá ningún otro elemento con el mismo ID. Por lo tanto, el selector podría escribirse como #topmenu.

Aunque la propiedad list-style-type no es una propiedad directa del elemento ul, las propiedades CSS del elemento padre son heredadas por sus hijos, por lo que el estilo asignado al elemento ul será heredado por su elementos secundarios li.

No todos los elementos tienen un ID mediante el cual se pueden seleccionar. De hecho, se espera que solo algunos elementos clave de diseño de una página tengan ID. Tome las listas de planetas utilizadas en el código de muestra, por ejemplo. Aunque es posible asignar ID únicos para cada elemento repetido individual como estos, este método no es práctico para páginas más extensas con mucho contenido. Más bien, podemos usar el ID del elemento principal div como selector para cambiar las propiedades de sus elementos internos.

Sin embargo, el elemento div no está directamente relacionado con las listas HTML, por lo que agregarle la propiedad list-style-type no tendrá ningún efecto en sus hijos. Por lo tanto, para cambiar el círculo negro en las listas dentro del contenido div a un círculo hueco, debemos usar un selector descendiente:

#topmenu {
  list-style-type: none
}

#content ul {
  list-style-type: circle
}

El selector #content ul se denomina selector descendiente porque solo coincide con los elementos ul que son hijos del elemento cuyo ID es content. Podemos utilizar tantos niveles de descendencia como sea necesario. Por ejemplo, el uso de #content ul li coincidiría solo con los elementos li que son descendientes de los elementos ul que son descendientes del elemento cuyo ID es content. Pero en este ejemplo, el selector más largo tendrá el mismo efecto que usar #content ul, porque los elementos li heredan las propiedades CSS establecidas en su padre ul. Los selectores descendientes son una técnica esencial a medida que aumenta la complejidad del diseño de la página.

Digamos que ahora desea cambiar la propiedad font-style de los elementos de la lista topmenu y en la lista del footer div para que parezcan oblicuos. No puede simplemente escribir una regla CSS usando ul como selector, porque también cambiará los elementos de la lista en el content div. Hasta ahora, hemos cambiado las propiedades de CSS usando un selector a la vez, y este método también se puede usar para esta tarea:

#topmenu {
  font-style: oblique
}

#footer ul {
  font-style: oblique
}

Sin embargo, los selectores separados no son la única forma de hacerlo. CSS nos permite agrupar selectores que comparten uno o más estilos, usando una lista de selectores separados por comas:

#topmenu, #footer ul {
  font-style: oblique
}

La agrupación de selectores elimina el trabajo adicional de escribir estilos duplicados. Además, es posible que desee cambiar la propiedad nuevamente en el futuro y es posible que no recuerde cambiarla en todos los lugares.

Clases

Si no desea preocuparse demasiado por la jerarquía de elementos, simplemente puede agregar una clase al conjunto de elementos que desea personalizar. Las clases son similares a los ID, pero en lugar de identificar solo un elemento en la página, pueden identificar un grupo de elementos que comparten las mismas características.

Tome la página HTML de muestra en la que estamos trabajando, por ejemplo. Es poco probable que en las páginas del mundo real encontremos estructuras tan simples, por lo que sería más práctico seleccionar un elemento usando solo clases, o una combinación de clases y descendencia. Para aplicar la propiedad font-style: oblique a las listas del menú usando clases, primero necesitamos agregar la propiedad class a los elementos en el archivo HTML. Lo haremos primero en el menú superior:

<ul id="topmenu" class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

Y luego en el menú del pie de página:

<div id="footer">

<ul class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/articles">Articles</a></li>
  <li><a href="/about">About</a></li>
</ul>

</div><!-- #footer -->

Con eso, podemos reemplazar el grupo selector #topmenu, #footer ul por el selector basado en clases .menu:

.menu {
  font-style: oblique
}

Al igual que con los selectores basados en ID, agregar el nombre de la etiqueta a la izquierda del punto en los selectores basados en clases es opcional. Sin embargo, a diferencia de los ID, se supone que la misma clase se usa en más de un elemento y ni siquiera es necesario que sean del mismo tipo. Por lo tanto, si la clase menu se comparte entre diferentes tipos de elementos, usar el selector ul.menu solo coincidiría con los elementos ul que tienen la clase menu. En su lugar, usar .menu como selector coincidirá con cualquier elemento que tenga la clase menu, independientemente de su tipo.

Además, los elementos se pueden asociar a más de una clase. Podríamos diferenciar entre el menú superior e inferior agregando una clase extra a cada uno de ellos:

<ul id="topmenu" class="menu top">

Y en el menú del pie de página:

<ul class="menu footer">

Cuando el atributo class tiene más de una clase, deben estar separadas por espacios. Ahora, además de la regla CSS compartida entre los elementos de la clase menu, podemos seleccionar el menú superior y pie de página usando sus clases correspondientes:

.menu {
  font-style: oblique
}

.menu.top {
  font-size: large
}

.menu.footer {
  font-size: small
}

Tenga en cuenta que escribir .menu.top difiere de .menu .top (con un espacio entre las palabras). El primer selector coincidirá con elementos que tengan las clases menu y top, mientras que el segundo coincidirá con elementos que tengan la clase top y un elemento principal con la clase menu.

Selectores especiales

Los selectores CSS también pueden coincidir con los estados dinámicos de los elementos. Estos selectores son particularmente útiles para elementos interactivos, como hipervínculos. Es posible que desee la aparición de hipervínculos cuando el puntero del mouse se mueve sobre ellos, para llamar la atención del visitante.

De regreso a nuestra página de muestra, podríamos eliminar los subrayados de los enlaces en el menú superior y mostrar una línea solo cuando el puntero del mouse se mueva sobre el enlace correspondiente. Para hacer esto, primero escribimos una regla para eliminar el subrayado de los enlaces en el menú superior:

.menu.top a {
  text-decoration: none
}

Luego usamos la pseudoclase :hover en esos mismos elementos para crear una regla CSS que se aplicará solo cuando el puntero del mouse esté sobre el elemento correspondiente:

.menu.top a:hover {
  text-decoration: underline
}

El selector de pseudoclase :hover acepta todas las propiedades de las reglas CSS convencionales. Otras pseudoclases incluyen :visited, que coincide con los hipervínculos que ya se han visitado, y :focus, que coincide con los elementos del formulario que han recibido el foco.

Ejercicios guiados

Supongamos que una página HTML tiene una hoja de estilo asociada que contiene las dos reglas siguientes:
```
p {
  color: green;
}

p {
  color: red;
}
```
¿Qué color aplicará el navegador al texto dentro de los elementos p?
¿Cuál es la diferencia entre usar el selector de ID div#main y #main?
¿Qué selector coincide con todos los elementos p usados dentro de un div con el atributo de ID #main?
¿Cuál es la diferencia entre usar el selector de clases p.highlight y .highlight?

Ejercicios de exploración

Escriba una sola regla CSS que cambie la propiedad font-style a oblique. La regla debe coincidir solo con los elementos a que están dentro de <div id="sidebar"></div> o <ul class="links"></ul>.
Suponga que desea cambiar el estilo de los elementos cuyo atributo class se establece en article reference, como en <p class="article reference">. Sin embargo, el selector .article .reference no parece alterar su apariencia. ¿Por qué el selector no coincide con los elementos como se esperaba?
Escriba una regla CSS para cambiar la propiedad color de todos los enlaces visitados en la página a red.

Resumen

Esta lección cubre cómo usar selectores CSS y cómo el navegador decide qué estilos aplicar a cada elemento. Al estar separado del marcado HTML, CSS proporciona muchos selectores para hacer coincidir elementos individuales o grupos de elementos en la página. La lección abarca los siguientes conceptos y procedimientos:

Estilos de página amplia y herencia de estilos.
Elementos de estilo por tipo.
Usar el ID del elemento y la clase como selectores.
Selectores compuestos.
Uso de pseudoclases para diseñar elementos dinámicamente.

Respuestas a los ejercicios guiados

Supongamos que una página HTML tiene una hoja de estilo asociada que contiene las dos reglas siguientes:
```
p {
  color: green;
}

p {
  color: red;
}
```
¿Qué color aplicará el navegador al texto dentro de los elementos p?

El color red. Cuando dos o más selectores equivalentes tienen propiedades en conflicto, el navegador elegirá el último.
¿Cuál es la diferencia entre usar el selector de ID div#main y #main?

El selector div#main coincide con un elemento div que tiene el ID main, mientras que el selector #main coincide con el elemento que tiene el ID main, independientemente de su tipo.
¿Qué selector coincide con todos los elementos p utilizados dentro de un div con el atributo ID #main?

El selector #main p o div#main p.
¿Cuál es la diferencia entre usar el selector de clases p.highlight y .highlight?

El selector p.highlight solo coincide con los elementos de tipo p que tienen la clase highlight, mientras que el selector .highlight coincide con todos los elementos que tienen la clase highlight, independientemente de su tipo.

Respuestas a los ejercicios de exploración

Escribe una única regla CSS que cambie la propiedad font-style a oblique. La regla debe coincidir solo con los elementos a que están dentro de <div id="sidebar"></div> o <ul class="links"></ul>.
```
#sidebar a, ul.links a {
  font-style: oblique
}
```
Suponga que desea cambiar el estilo de los elementos cuyo atributo class se establece en article reference, como en <p class="article reference">. Sin embargo, el selector .article .reference no parece alterar su apariencia. ¿Por qué el selector no coincide con los elementos como se esperaba?

El selector .article .reference coincidirá con los elementos que tienen la clase reference que son descendientes de elementos que tienen la clase article. Para hacer coincidir los elementos que tienen las clases article y reference, el selector debe ser .article.reference (sin el espacio entre ellos).
Escriba una regla CSS para cambiar la propiedad color de todos los enlaces visitados en la página a red
```
a:visited {
  color: red;
}
```