Lección 28: Avanzado

Pseudoelementos

Añade estilos a una parte concreta de un elemento. Se representa con doble dos puntos (::) a continuación del selector.

after

Después de un elemento. Muy utilizando junto a la propiedad content ya que permite disponer de un área colindante.

.firma::after {
  content: " Francisco de Quevedo";
  font-style: italic;
}
<p class="firma">
  El amor es fe y no ciencia.
</p>

El amor es fe y no ciencia.

before

Antes de un elemento. Muy utilizando junto a la propiedad content ya que permite disponer de un área colindante.

.tarea::before {
  content: "[X] ";
}
<p class="tarea">
  Aprender ruso.
</p>

Aprender ruso.

first-letter

Primera letra del contenido.

.elemento::first-letter {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: bold;
}
<p class="elemento">
 en un lugar de la Mancha...
</p>

en un lugar de la Mancha...

first-line

Primera línea del contenido.

.texto::first-line {
  background: yellow;
}
<p class="texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

file-selector-button

Botón de un input de tipo file.

.input::file-selector-button {
  background: orange;
  color: white;
  border: 0;
}
<input name="avatar" type="file">

Pseudoclases

Estados especiales de un selector, como puede ser :hover o :focus. Se representa con dos puntos (:) a continuación del selector.

first-child

Primer elemento de un conjunto de hermanos.

li:first-child {
  color: orange;
}
<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>
  • Pan
  • Arroz
  • Lentejas
  • Garbanzos

Solo funciona aplicando a selectores hermanos, no sobre un padre (ul en este caso).

last-child

Último elemento de un conjunto de hermanos.

li:last-child {
  color: orange;
}
<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>
  • Pan
  • Arroz
  • Lentejas
  • Garbanzos

nth-child

Elemento determinado de un conjunto de hermanos. Empieza a contar por 1.

En caso que quiera dar un estilo al segundo.

li:nth-child(2) {
  color: orange;
}
<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>
  • Pan
  • Arroz
  • Lentejas
  • Garbanzos

Técnicas para centrar, o focalizar, la atención

Cuando se muestra un modal popup, hay que rediriguir donde mira el visitante y eliminar cualquier tipo de distración. Para ello podemos usar un par de técnicas.

@supports

Existen muchos estilos que, lamentablemente, no son compatibles con todos los navegadores. Ello nos limita a no poder utilizar características avanzadas. La declaración @supports nos da una solución parcial, ya que nos permite preguntar si cierto estilo es compatible antes de usarlo, y en caso contrario nos brinda la posibilidad de dar una alternativa.

Un caso típico. Quiero saber si puedo usar lch, una expresión de un color en LCH. De momento, solo es compatible con Safari. Usaré para mis a el color lch(30% 45 27), y en caso que no sea posible buscaré una aproximación en rgb.

a {
    /* Compatible con todos los navegadores */
    color: rgb(50.24% 14.25% 16.34%);
}

/* Compatible con Safari */
@supports (color: lch(30% 45 27)) {
    a {
        color: lch(30% 45 27);
    }
}

Otro caso típico más avanzado. Quiero usar backdrop-filter, que nos añade en el padre un desenfoque para centrar la atención. Solo es compatible en Chrome, mientras escribo estas líneas, y en Safari con el prefijo webkit.

.modal {
    /* Estilos del modal */
}

/* ¿Es compatible con Chrome? */
@supports (backdrop-filter: blur(8px)) {
    .modal {
        backdrop-filter: blur(8px);
    }
}

/* ¿Es compatible con Safari? */
@supports (-webkit-backdrop-filter: blur(8px)) {
    .modal {
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ¿No es compatible? Por ejemplo Firefox */
@supports (not (backdrop-filter: blur(8px))) and (not (-webkit-backdrop-filter: blur(8px))) {
    .modal {
        background-color: #fff5;
    }
}

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario