Estilizando la página de empleos

Ahora que hemos aprendido sobre clases, pseudo-clases, especificidad y selectores, es momento de poner todo en práctica estilizando nuestra página de empleos (empleos.html).

El objetivo

Vamos a crear una sección de listado de empleos con:

• Un contenedor con borde redondeado
• Artículos (ofertas de empleo) separados por bordes
• Layout flexible con información organizada
• El último artículo sin borde inferior (usando :last-child)

La estructura HTML

<div class="jobs-listings">
  <article class="job-listing-card">
    <div>
      <h3>Ingeniero de Software</h3>
      <small>Tech Solutions Inc. | Remoto</small>
      <p>
        Buscamos un ingeniero de software con experiencia en desarrollo web y conocimientos en
        JavaScript, React y Node.js. El candidato ideal debe ser capaz de trabajar en equipo y tener
        buenas habilidades de comunicación.
      </p>
    </div>
    <button class="button-apply-job" id="boton-importante">Aplicar</button>
  </article>

  <article class="job-listing-card">
    <div>
      <h3>Analista de Datos</h3>
      <small>Data Driven Co. | Ciudad de México</small>
      <p>
        Estamos buscando un analista de datos con experiencia en el manejo de grandes conjuntos de
        datos y herramientas de visualización. Se requiere conocimiento en SQL, Python y R.
      </p>
    </div>
    <button class="button-apply-job">Aplicar</button>
  </article>

  <article class="job-listing-card">
    <div>
      <h3>Desarrollador de Aplicaciones Móviles</h3>
      <small>Mobile Apps Ltd. | Guadalajara</small>
      <p>
        Buscamos un desarrollador de aplicaciones móviles con experiencia en iOS y/o Android. El
        candidato debe tener conocimientos en Swift, Kotlin y el desarrollo de interfaces de
        usuario.
      </p>
    </div>
    <button class="button-apply-job">Aplicar</button>
  </article>

  <article class="job-listing-card">
    <div>
      <h3>Ingeniero de DevOps</h3>
      <small>Cloud Services SA | Remoto</small>
      <p>
        Estamos buscando un ingeniero de DevOps con experiencia en la gestión de infraestructuras en
        la nube, automatización de procesos y herramientas de integración continua. Se requiere
        conocimiento en AWS, Azure o GCP.
      </p>
    </div>
    <button class="button-apply-job">Aplicar</button>
  </article>
</div>

Los estilos CSS

.jobs-listings {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;

  article {
    background: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0;

    display: flex;
    align-items: start;
    gap: 1rem;

    small {
      font-size: 0.875rem;
      opacity: 0.75;
    }

    p {
      margin-top: 0.5rem;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}

Desglosando el CSS

1. El contenedor principal

.jobs-listings {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
}

• border: Borde sutil usando color blanco con transparencia (.3 = 30% de opacidad)
• border-radius: 1rem: Esquinas redondeadas (1rem = 16px aproximadamente)

2. Los artículos individuales (.job-listing-card)

.jobs-listings {
  article {
    background: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0;
  }
}

Estos estilos sobrescriben posibles estilos previos que pudieran tener los <article>:

• background: none: Sin fondo
• box-shadow: none: Sin sombra
• border-radius: 0: Sin esquinas redondeadas
• border-bottom: Línea separadora entre empleos
• margin: 0: Sin margen exterior

3. Layout flexible

.jobs-listings {
  article {
    display: flex;
    align-items: start;
    gap: 1rem;
  }
}

• display: flex: Convierte el artículo en contenedor flexible
• align-items: start: Alinea los elementos al inicio (arriba)
• gap: 1rem: Espacio entre los elementos (contenido y botón)

Esto coloca el contenido de la oferta a la izquierda y el botón “Aplicar” a la derecha.

4. Estilizando elementos internos

.jobs-listings {
  article {
    small {
      font-size: 0.875rem;
      opacity: 0.75;
    }

    p {
      margin-top: 0.5rem;
    }
  }
}

• small: Texto más pequeño (0.875rem ≈ 14px) y con transparencia (75% opaco)
• p: Añade separación superior para el párrafo de descripción

La pseudo-clase :last-child

La parte más interesante es esta:

.jobs-listings {
  article {
    &:last-child {
      border-bottom: none;
    }
  }
}

¿Qué hace :last-child?

La pseudo-clase :last-child selecciona un elemento solo si es el último hijo de su contenedor padre.

Problema sin :last-child

Sin usar :last-child, todos los artículos tendrían el borde inferior:

┌─────────────────────────────┐
│ Artículo 1                  │
├─────────────────────────────┤ ← Borde
│ Artículo 2                  │
├─────────────────────────────┤ ← Borde
│ Artículo 3                  │
├─────────────────────────────┤ ← Borde innecesario
└─────────────────────────────┘

Solución con :last-child

Con :last-child, el último artículo no tiene borde inferior:

┌─────────────────────────────┐
│ Artículo 1                  │
├─────────────────────────────┤ ← Borde
│ Artículo 2                  │
├─────────────────────────────┤ ← Borde
│ Artículo 3                  │ ← Sin borde
└─────────────────────────────┘

Pseudo-clases relacionadas

CSS tiene otras pseudo-clases similares a :last-child:

:first-child

Selecciona el primer hijo:

article {
  &:first-child {
    border-top: 3px solid blue; /* Borde especial en el primero */
  }
}

:nth-child()

Selecciona elementos según su posición:

/* Elementos pares */
article:nth-child(even) {
  background: #f5f5f5;
}

/* Elementos impares */
article:nth-child(odd) {
  background: white;
}

/* Tercer elemento */
article:nth-child(3) {
  font-weight: bold;
}

/* Cada 3 elementos */
article:nth-child(3n) {
  border-left: 3px solid blue;
}

:only-child

Selecciona un elemento solo si es el único hijo:

article:only-child {
  /* Se aplica si hay un solo artículo */
  border: 2px solid gold;
}

El repaso final para mover las manitas

• :last-child: Selecciona el último hijo de un contenedor
• Útil para: Eliminar bordes, márgenes o estilos innecesarios en el último elemento
• Familia de pseudo-clases: :first-child, :nth-child(), :only-child
• CSS Nesting: Permite organizar estilos de forma jerárquica
• Flexbox: Ideal para crear layouts de listados