Inspeccionar selectores

Completado

Los selectores CSS se usan para seleccionar los elementos que se van a aplicar al estilo. Los selectores ofrecen una gran flexibilidad y potencia. Los selectores permiten aplicar un estilo a todos los elementos o a un elemento específico, e incluso una letra específica.

Hay tres tipos principales de selectores:

• Elementos
• Clases
• Ids.

Mediante el uso de estos selectores, puede aplicar estilos a una gran cantidad de elementos o a unos pocos.

Selectores de elementos

Un selector de elementos se aplica a todos los elementos con esa etiqueta. Cualquier elemento HTML se puede usar como selector de elementos. El uso de h1 permite modificar todos los elementos h1 de la página.

h1 {
    /* style */
}

Selectores de clase

Todos los elementos HTML permiten agregar un atributo class. class se usa para agrupar elementos y permitirle marcarlos para aplicar la configuración de CSS.

Al crear un currículum, tienes secciones para tu educación e historial laboral. El uso de una clase le permitiría dar formato a esos elementos con el mismo estilo.

<div class="history">
    <h2>Employer name</h2>
    <h3>Job title</h3>
    <h3>3 Jun 19 - 8 Jun 21</h3>
</div>

<div class="history">
    <h2>School name</h2>
    <h3>Major</h3>
    <h3>Sep 2014 - May 2018</h3>
</div>

En el ejemplo anterior, es probable que quiera que el formato de cada div sea el mismo ya que muestran tipos de información similares. Al marcar los dos elementos div con la misma clase, puede aplicar el mismo estilo CSS a cada uno.

Para identificar una clase en CSS, debe asignar un prefijo . delante del nombre. En nuestro ejemplo, usaría .history.

.history {
    /* your styles */
}

Si estuviera usando un archivo CSS, escribiría la definición de estilo de clase en el archivo CSS. El atributo de clase en HTML hace referencia a la definición del archivo CSS.

Seudoclases

Las seudoclases permiten identificar elementos en función de su ubicación en una página o cómo interactúa el usuario con ellos.

A medida que un usuario interactúa con una página web, cambia el estado de varios elementos. Un usuario podría mantener el mouse sobre un elemento y quiere que el color cambie cuando mantenga el puntero. O si el usuario seleccionó un enlace. Después de que visiten ese enlace, es posible que desee informarles cambiando el estilo. CSS admite muchas seudoclases, que se aplican dinámicamente en función de lo que hace o ha hecho el usuario. Las seudoclases tienen el prefijo :, y se colocan después de otro selector.

Por ejemplo, para establecer el color de fondo de un vínculo en amarillo cuando un usuario mantiene el cursor sobre él, puede usar el siguiente CSS:

a:hover {
    background-color: yellow;
}

Algunas de las pseudo clases más comunes se enumeran en la tabla siguiente:

Seudoclase	Descripción
hover	El usuario mantiene el cursor sobre un elemento
visited	Un enlace en el que se ha hecho clic anteriormente
link	Un vínculo no visitado
first-child	El primer elemento secundario que coincide con el selector en una jerarquía
last-child	El último elemento secundario que coincide con el selector en una jerarquía

Importante

Con seudoelementos y CSS, puede quitar el subrayado de los hipervínculos. Como regla general, es mejor dejar el subrayado con fines de accesibilidad. El texto subrayado permite a un usuario identificar rápidamente vínculos en una página.

Selectores de ID

De forma similar a las clases, un identificador permite aplicar un estilo a un elemento. La diferencia clave es que una clase se puede aplicar a varios elementos, un identificador debe ser único y hacer referencia a un solo elemento.

En un CV, es posible que tenga una sección para las redes sociales, como X, GitHub o su blog. Si quiere un estilo personalizado para esa sección, puede establecer un identificador:

<div id="social-media">
    <!-- list of links -->
</div>

Los identificadores tienen el prefijo # en CSS:

#social-media {
    /* style */
}

Nota

La convención de nomenclatura estándar para las clases e identificadores es usar "skewer-casing". Cada palabra está en minúsculas y se separa con -. El nombre skewer-case proviene de que las palabras aparecen como si estuvieran ensartadas.