Lección 26: 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.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios