Lección 27: 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>

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>

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>

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>

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>

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>

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>

:not

Hablamos de una pseudoclase que en lugar de seleccionar, excluye. Es decir, selecciona todo menos lo que se le indica.

.destacado {
  color: red;
}

p:not(.destacado) {
  color: orange;
}

<!-- Este párrafo será rojo -->
<p class="destacado">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!-- Este párrafo será naranja -->
<p class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Es muy útil para evitar sobrescribir selectores.

Por ejemplo, en el siguiente caso tengo una clase para todos mis artículos llamado .articulo. Por defecto se ocultará. Para mostrarlo usaremos la clase .articulo--ver.

<article class="articulo articulo--ver">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>

Habitualmente utilizar el orden de cascada para sobrescribir los estilos.

.articulo {
  display: none;
}

.articulo--ver {
  display: block;
}

Pero con :not podemos evitarlo.

.articulo:not(.articulo--ver) {
  display: none;
}

Evitamos definir un display por defecto, y solo definimos el que queremos eliminar en caso que no tenga la clase .articulo--ver.

Otro ejemplo es cuando jugamos con :first-child o :last-child. En el siguiente caso, quiero que todos los elementos de una lista tengan un borde en la parte inferior, menos el último.

li {
  border-bottom: 1px solid orange;
}

li:last-child {
  border-bottom: 0;
}

Con :not podemos resumirlo de la siguiente manera.

li:not(:last-child) {
  border-bottom: 1px solid orange;
}

El selector :not es muy potente, pero hay que tener cuidado con su uso global. No es recomendable usarlo en selectores padres generales, como por ejemplo body:not(.home). En este caso, el navegador tiene que recorrer todo el DOM para saber si el body tiene la clase .home o no. Siempre para selectores específicos.

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.

• Oscurecer fondo.
• Por desenfoque.

@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;
    }
}

¿Me ayudas?

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario