Tutorial CSS: Selectores básicos

Selectores de tipo (etiqueta), clase e identificador

Los selectores son uno de los conceptos fundamentales en CSS, ya que nos permiten indicar a qué elementos HTML queremos aplicar los estilos. Los selectores básicos son los primeros que debes dominar para comenzar a dar estilo a tus páginas web.

Selector de tipo (etiqueta)

El selector de tipo selecciona todos los elementos HTML que coinciden con el nombre de la etiqueta especificada. Es la forma más sencilla de aplicar estilos a elementos HTML.

p {
  color: blue;
  font-size: 16px;
}

h1 {
  color: darkblue;
  font-size: 24px;
}

En este ejemplo, todos los párrafos (<p>) de la página tendrán texto azul y tamaño de 16 píxeles, mientras que todos los encabezados de nivel 1 (<h1>) tendrán texto azul oscuro y tamaño de 24 píxeles.

El selector de tipo es útil cuando queremos aplicar un estilo consistente a todos los elementos de un mismo tipo en nuestra página. Sin embargo, tiene una especificidad baja, lo que significa que sus estilos pueden ser fácilmente sobrescritos por otros selectores más específicos.

Selector de clase

El selector de clase se utiliza para seleccionar elementos que tienen un atributo class específico. Se identifica con un punto (.) seguido del nombre de la clase.

.destacado {
  background-color: yellow;
  font-weight: bold;
}

.error {
  color: red;
  border: 1px solid red;
}

Para aplicar estos estilos en HTML, añadimos el atributo class a los elementos:

<p class="destacado">Este párrafo está destacado.</p>
<span class="error">Este es un mensaje de error.</span>

Las clases son reutilizables, lo que significa que podemos aplicar la misma clase a múltiples elementos. También podemos aplicar múltiples clases a un mismo elemento separándolas con espacios:

<p class="destacado error">Este párrafo tiene dos clases aplicadas.</p>

El selector de clase tiene una especificidad media y es probablemente el selector más utilizado en CSS por su flexibilidad y reutilización.

Selector de ID

El selector de ID selecciona un elemento con un atributo id específico. Se identifica con un símbolo de almohadilla (#) seguido del nombre del ID.

#cabecera {
  background-color: #333;
  color: white;
  padding: 20px;
}

#pie-pagina {
  font-size: 12px;
  text-align: center;
}

Para aplicar estos estilos en HTML:

<header id="cabecera">Bienvenidos a mi sitio web</header>
<footer id="pie-pagina">Copyright 2023</footer>

A diferencia de las clases, los ID deben ser únicos en una página HTML. Esto significa que no deberías tener más de un elemento con el mismo ID en tu documento. Los selectores de ID tienen una especificidad alta, lo que significa que sus estilos prevalecerán sobre los selectores de tipo y clase.

Comparación y uso práctico

Veamos un ejemplo que combina los tres tipos de selectores:

/* Selector de tipo */
p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

/* Selector de clase */
.info {
  background-color: #e8f4f8;
  padding: 10px;
  border-radius: 5px;
}

/* Selector de ID */
#principal {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ddd;
}

En HTML:

<div id="principal">
  <p>Este es un párrafo normal.</p>
  <p class="info">Este es un párrafo con información destacada.</p>
</div>

En este ejemplo:

• Todos los párrafos tendrán la fuente Arial y un interlineado de 1.5.
• El párrafo con clase "info" tendrá además un fondo azul claro, padding y bordes redondeados.
• Todo el contenido estará dentro de un contenedor con ID "principal" que tendrá un ancho del 80%, centrado y con un borde gris claro.

Cuándo usar cada selector

• Selector de tipo: Úsalo para establecer estilos base para elementos HTML específicos.
• Selector de clase: Es la opción más versátil. Úsalo para aplicar estilos a grupos de elementos que comparten características, independientemente de su tipo.
• Selector de ID: Úsalo para elementos únicos en la página que necesitan estilos específicos, como cabeceras, pies de página o secciones principales.

Es una buena práctica utilizar principalmente selectores de clase para la mayoría de tus estilos, ya que ofrecen un buen equilibrio entre especificidad y reutilización. Los selectores de ID deberían reservarse para elementos verdaderamente únicos, y los selectores de tipo para establecer estilos base.

Selector universal y agrupación de selectores

Además de los selectores de tipo, clase e identificador, CSS ofrece otras formas de seleccionar elementos que nos permiten aplicar estilos de manera más eficiente. Dos de estas técnicas son el selector universal y la agrupación de selectores.

Selector universal

El selector universal se representa mediante un asterisco (*) y selecciona todos los elementos HTML de la página sin excepción. Es una herramienta muy potente pero que debe usarse con precaución.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Este ejemplo aplica un reset básico a todos los elementos HTML de la página, eliminando los márgenes y rellenos predeterminados, y cambiando el modelo de caja para que el ancho y alto incluyan el padding y el borde.

El selector universal es especialmente útil para establecer propiedades globales o para realizar reinicios de estilos. Sin embargo, tiene algunas consideraciones importantes:

• Tiene la especificidad más baja de todos los selectores.
• Puede afectar al rendimiento si se usa con muchas propiedades, ya que el navegador debe aplicar esos estilos a todos los elementos.

* {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Los elementos específicos pueden sobrescribir estas reglas */
h1 {
  color: #000;
}

Agrupación de selectores

La agrupación de selectores nos permite aplicar el mismo conjunto de estilos a varios selectores diferentes. Para agrupar selectores, simplemente los separamos con comas.

h1, h2, h3 {
  font-family: 'Georgia', serif;
  color: #444;
  margin-bottom: 15px;
}

Este código aplica los mismos estilos a todos los encabezados h1, h2 y h3, evitando la repetición de código.

La agrupación funciona con cualquier tipo de selector, no solo con selectores de tipo:

.error, .warning, #message {
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.error {
  background-color: #ffdddd;
  border: 1px solid #ff0000;
}

.warning {
  background-color: #ffffdd;
  border: 1px solid #ffcc00;
}

#message {
  background-color: #ddffdd;
  border: 1px solid #00cc00;
}

En este ejemplo, primero aplicamos propiedades comunes a tres selectores diferentes (dos clases y un ID), y luego definimos propiedades específicas para cada uno.

Combinando selector universal con otros selectores

Podemos combinar el selector universal con otros selectores para crear reglas más específicas:

div * {
  color: blue;
}

Este código selecciona todos los elementos que son descendientes de un div y les aplica color azul.

.container * {
  transition: all 0.3s ease;
}

Aquí estamos aplicando una transición suave a todos los elementos dentro de elementos con la clase .container.

Casos prácticos

Normalización básica con selector universal

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Luego podemos añadir estilos específicos */
body {
  font-family: 'Helvetica', sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 20px;
}

Estilizando enlaces y botones con agrupación

a, button, .btn {
  color: #0066cc;
  text-decoration: none;
  cursor: pointer;
}

a:hover, button:hover, .btn:hover {
  text-decoration: underline;
  color: #004499;
}

Aplicando estilos a elementos de formulario

input, textarea, select {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 10px;
}

input:focus, textarea:focus, select:focus {
  border-color: #0066cc;
  outline: none;
  box-shadow: 0 0 3px rgba(0, 102, 204, 0.3);
}

Buenas prácticas

• Usa el selector universal con moderación: Aplicar muchas propiedades al selector universal puede afectar al rendimiento. Limítalo a reinicios básicos o propiedades que realmente quieras aplicar globalmente.

• Agrupa selectores relacionados: La agrupación es más efectiva cuando los selectores comparten un propósito o función similar en tu diseño.

• Mantén las agrupaciones manejables: Evita agrupar demasiados selectores en una sola regla, ya que puede dificultar el mantenimiento del código.

/* Mejor así: agrupación lógica */
h1, h2, h3 {
  font-family: 'Georgia', serif;
}

input, textarea, select {
  border: 1px solid #ddd;
}

/* Evita agrupaciones excesivas o sin relación lógica */
h1, .nav, input, #footer {
  /* Esto puede ser confuso y difícil de mantener */
}

Tanto el selector universal como la agrupación de selectores son herramientas valiosas que, cuando se usan correctamente, pueden hacer que tu CSS sea más eficiente y fácil de mantener, reduciendo la duplicación de código y proporcionando una estructura más clara.

Selectores descendentes y selectores hijo directo

Los selectores combinadores nos permiten seleccionar elementos basándonos en su relación con otros elementos en el árbol HTML. Dos de los combinadores más útiles son el selector descendente y el selector hijo directo, que nos ayudan a aplicar estilos de manera más precisa.

Selector descendente

El selector descendente (representado por un espacio entre selectores) selecciona elementos que son descendientes de otro elemento, sin importar qué tan profundos estén en la jerarquía. Es uno de los combinadores más utilizados en CSS.

article p {
  line-height: 1.6;
  margin-bottom: 15px;
}

Este ejemplo selecciona todos los párrafos (<p>) que están dentro de un elemento <article>, sin importar si son hijos directos o están anidados más profundamente.

Veamos un ejemplo más completo:

.container h2 {
  color: #2c3e50;
  font-size: 24px;
}

nav ul li a {
  text-decoration: none;
  color: #3498db;
}

En el primer caso, seleccionamos todos los encabezados h2 dentro de elementos con la clase .container. En el segundo, seleccionamos todos los enlaces dentro de elementos de lista que están dentro de listas no ordenadas dentro de un elemento nav.

El selector descendente es muy flexible porque no requiere que los elementos estén directamente anidados. Sin embargo, esta misma flexibilidad puede llevar a seleccionar más elementos de los deseados si no se usa con cuidado.

Selector hijo directo

El selector hijo directo (representado por el símbolo >) es más específico que el selector descendente. Selecciona elementos que son hijos directos de otro elemento, es decir, que están anidados exactamente un nivel por debajo.

nav > ul {
  display: flex;
  list-style: none;
}

Este código selecciona solo las listas no ordenadas (<ul>) que son hijos directos de un elemento <nav>, pero no seleccionaría listas que estén más profundamente anidadas.

La diferencia entre ambos selectores se hace evidente con estructuras HTML más complejas:

<nav>
  <ul>
    <li>Elemento 1</li>
    <li>
      Elemento 2
      <ul>
        <li>Subelemento 2.1</li>
        <li>Subelemento 2.2</li>
      </ul>
    </li>
  </ul>
</nav>

Con este HTML:

/* Selecciona todas las listas dentro de nav */
nav ul {
  margin: 0;
  padding: 0;
}

/* Selecciona solo la lista de primer nivel */
nav > ul {
  background-color: #f8f9fa;
}

/* Selecciona todos los elementos de lista dentro de nav */
nav li {
  padding: 5px;
}

/* Selecciona solo los elementos de lista que son hijos directos de la lista principal */
nav > ul > li {
  border-bottom: 1px solid #ddd;
}

Comparación práctica

Veamos un ejemplo que muestra claramente la diferencia entre ambos selectores:

<div class="card">
  <h2>Título de la tarjeta</h2>
  <div class="content">
    <p>Este es un párrafo dentro del contenido.</p>
    <section>
      <p>Este es un párrafo dentro de una sección dentro del contenido.</p>
    </section>
  </div>
</div>

Con este HTML, podemos aplicar diferentes estilos usando selectores descendentes y de hijo directo:

/* Selector descendente: selecciona TODOS los párrafos dentro de .card */
.card p {
  color: #333;
  line-height: 1.5;
}

/* Selector hijo directo: selecciona SOLO los párrafos que son hijos directos de .content */
.content > p {
  font-weight: bold;
  font-size: 16px;
}

En este ejemplo:

• El primer selector afectará a ambos párrafos (tanto el que está directamente en .content como el que está dentro de <section>).
• El segundo selector solo afectará al primer párrafo, que es hijo directo de .content.

Casos de uso comunes

Menús de navegación multinivel

/* Estilo base para todos los elementos del menú */
.menu li {
  list-style: none;
}

/* Estilo específico para elementos de primer nivel */
.menu > li {
  display: inline-block;
  position: relative;
}

/* Estilo para submenús */
.menu > li > ul {
  position: absolute;
  display: none;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Mostrar submenú al hacer hover */
.menu > li:hover > ul {
  display: block;
}

Estructuras de artículos o posts

/* Estilo para todos los párrafos dentro del artículo */
article p {
  font-size: 16px;
  line-height: 1.6;
}

/* Estilo específico para párrafos directamente en el artículo (no en secciones anidadas) */
article > p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Estilo para párrafos dentro de secciones del artículo */
article section p {
  font-size: 15px;
  color: #555;
}

Combinando con otros selectores

Los selectores descendentes y de hijo directo se pueden combinar con otros tipos de selectores para crear selecciones más precisas:

/* Selecciona párrafos con clase .highlight dentro de secciones */
section p.highlight {
  background-color: #fffde7;
  padding: 10px;
}

/* Selecciona elementos con clase .item que son hijos directos de elementos con ID #products */
#products > .item {
  display: flex;
  border-bottom: 1px solid #eee;
}

Buenas prácticas

• Evita selectores descendentes demasiado largos: Cadenas como header nav ul li a pueden ser frágiles y difíciles de mantener. Considera usar clases en su lugar.

/* Evita esto */
header nav ul li a {
  color: blue;
}

/* Prefiere esto */
.nav-link {
  color: blue;
}

• Usa el selector hijo directo para estructuras predecibles: Es ideal cuando conoces exactamente la estructura HTML y quieres evitar aplicar estilos a elementos anidados más profundamente.

• Combina ambos selectores según sea necesario: A veces necesitarás la precisión del selector hijo directo, y otras veces la flexibilidad del selector descendente.

/* Ejemplo de uso combinado */
.sidebar > h3 {
  /* Estilos para encabezados que son hijos directos de .sidebar */
  margin-top: 0;
}

.sidebar ul li {
  /* Estilos para todos los elementos de lista dentro de .sidebar */
  padding: 5px 0;
}

Los selectores descendentes y de hijo directo son herramientas fundamentales que te permiten crear reglas CSS más específicas y estructuradas, ayudándote a mantener tu código más organizado y evitando la necesidad de añadir clases adicionales a cada elemento HTML.

Selectores de atributo básicos (presencia y valor exacto)

Los selectores de atributo son una potente característica de CSS que nos permite seleccionar elementos HTML basándonos en la presencia de un atributo o en el valor que contiene. Estos selectores amplían significativamente nuestras posibilidades de estilización sin necesidad de añadir clases o IDs adicionales.

Selección por presencia de atributo

El selector de presencia de atributo nos permite seleccionar elementos que tienen un atributo específico, independientemente de su valor. Se representa mediante corchetes [] que contienen el nombre del atributo.

[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Este ejemplo selecciona todos los elementos que tienen el atributo disabled, como botones o campos de formulario deshabilitados, y les aplica una apariencia visual que indica que no están disponibles.

Podemos aplicar este tipo de selector a cualquier atributo HTML:

[required] {
  border-left: 3px solid #ff6b6b;
}

[hidden] {
  display: none;
}

El primer selector aplica un borde rojo a la izquierda de todos los elementos que tienen el atributo required (comúnmente usado en campos de formulario obligatorios), mientras que el segundo asegura que los elementos con el atributo hidden no se muestren.

Selección por valor exacto de atributo

Cuando necesitamos más precisión, podemos seleccionar elementos basándonos en el valor exacto de un atributo. Este selector utiliza el operador de igualdad (=) dentro de los corchetes.

[type="text"] {
  padding: 8px;
  border-radius: 4px;
}

[lang="es"] {
  font-family: 'Lato', sans-serif;
}

En el primer ejemplo, seleccionamos todos los elementos que tienen exactamente type="text" (típicamente inputs de texto), mientras que en el segundo seleccionamos elementos con el atributo lang establecido exactamente como "es" (español).

Este tipo de selector es especialmente útil para estilizar elementos de formulario:

[type="submit"] {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

Aplicaciones prácticas

Estilización de enlaces según su destino

/* Enlaces a documentos PDF */
[href$=".pdf"] {
  background-image: url('pdf-icon.svg');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

/* Enlaces externos */
[href^="http"] {
  color: #0066cc;
}

/* Enlaces de correo electrónico */
[href^="mailto:"] {
  color: #009688;
}

Personalización de elementos de formulario

/* Campos de texto y áreas de texto */
[type="text"], [type="email"], [type="password"], textarea {
  border: 1px solid #ddd;
  padding: 10px;
  width: 100%;
  transition: border-color 0.3s;
}

/* Campos obligatorios */
[required] {
  border-left: 4px solid #ff6b6b;
}

/* Campos de solo lectura */
[readonly] {
  background-color: #f5f5f5;
  cursor: default;
}

Estilización de elementos según el idioma

/* Elementos en inglés */
[lang="en"] {
  font-family: 'Roboto', sans-serif;
}

/* Elementos en español */
[lang="es"] {
  font-family: 'Lato', sans-serif;
}

/* Elementos en japonés */
[lang="ja"] {
  font-family: 'Noto Sans JP', sans-serif;
}

Combinando selectores de atributo con otros selectores

Los selectores de atributo pueden combinarse con otros tipos de selectores para crear reglas más específicas:

/* Inputs de tipo texto dentro de un formulario con clase .contact-form */
.contact-form input[type="text"] {
  border-color: #3498db;
}

/* Enlaces con atributo target="_blank" dentro del pie de página */
footer a[target="_blank"] {
  color: #9b59b6;
  text-decoration: underline;
}

/* Párrafos con atributo data-importance="high" */
p[data-importance="high"] {
  font-weight: bold;
  color: #e74c3c;
}

Selectores de atributo y atributos personalizados (data-*)

HTML5 introdujo los atributos de datos personalizados (data-*), que son perfectos para usar con selectores de atributo:

<div class="card" data-category="technology">
  <h2>Novedades en CSS</h2>
  <p>Las últimas características de CSS...</p>
</div>

<div class="card" data-category="design">
  <h2>Principios de diseño web</h2>
  <p>Fundamentos de un buen diseño...</p>
</div>

/* Tarjetas de la categoría tecnología */
[data-category="technology"] {
  border-left: 4px solid #3498db;
}

/* Tarjetas de la categoría diseño */
[data-category="design"] {
  border-left: 4px solid #e74c3c;
}

Este enfoque es muy útil para aplicar estilos diferentes según metadatos o categorías sin necesidad de añadir múltiples clases.

Consideraciones de rendimiento

Los selectores de atributo son ligeramente más lentos que los selectores de clase o ID, pero la diferencia solo es relevante en situaciones de rendimiento extremo o en páginas con miles de elementos. Para la mayoría de los sitios web, esta diferencia es insignificante.

/* Más eficiente */
.external-link {
  color: #0066cc;
}

/* Menos eficiente, pero más flexible si no puedes modificar el HTML */
[rel="external"] {
  color: #0066cc;
}

Si tienes control sobre el HTML y el rendimiento es crítico, considera usar clases para los elementos más comunes. Sin embargo, los selectores de atributo siguen siendo una excelente opción para muchos casos de uso, especialmente cuando no puedes modificar el HTML o quieres evitar añadir clases adicionales.

Compatibilidad con navegadores

Los selectores de atributo básicos (presencia y valor exacto) tienen excelente soporte en todos los navegadores modernos, incluyendo versiones antiguas. Puedes usarlos con confianza en prácticamente cualquier proyecto web actual.

Los selectores de atributo son una herramienta fundamental en CSS que te permite crear estilos más específicos y semánticos, aprovechando la estructura y los atributos existentes en tu HTML sin necesidad de añadir marcado adicional.