Un llamado para :: n-ésimo-todo | Programar Plus

Con CSS3, tenemos selectores posicionales de pseudo clases para ayudarnos a seleccionar elementos específicos cuando no hay otras características distintivas además de dónde está en el DOM en relación con sus hermanos.

:first-child
:last-child
:nth-child
:nth-last-child

:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type

:only-child
:only-of-type

También obtenemos un par de pseudo elementos específicos de texto para ayudar con nuestras necesidades de tipografía:

::first-letter
::first-line

Ese es un gran comienzo, pero realmente sería útil si pudiéramos extender todo el concepto “: nth” a estos selectores tipográficos. Déjame convencerte.

Tenga en cuenta que la mayor parte del código siguiente no es válido. Es un código de ejemplo. Como el código “no sería genial si”.

:: nth-line () / :: last-line / :: nth-last-line ()

Nosotros ya tenemos ::first-line, así que para completar el conjunto agreguemos ::nth-line(), ::last-line, y ::nth-last-line().

Con estos, podríamos seleccionar las dos primeras líneas de un poema para resaltar.

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

No lo sé por la poesía, Brendon.

O quizás podríamos desvanecernos al final de un pasaje.

article.poem p:last-child::nth-last-line(3) {
   color: hsla(26, 5%, 25%, 1);
   font-size: 70%;
}
article.poem p:last-child::nth-last-line(2) {
   color: hsla(26, 5%, 50%, 1);
   font-size: 60%;
}
article.poem p:last-child::nth-last-line(1) {
   color: hsla(26, 5%, 75%, 1);
   font-size: 50%
}

Si se nos permitiera utilizar contenido generado en estos pseudo elementos de línea, podríamos lograr algo como la numeración de líneas sin tener que recurrir al marcado intrusivo.

pre::nth-line(n)::before {
  content: counter(line) ". ";
  color: #999;
}

Look ma, estilo de código multilínea práctico y sencillo.

Artículo relevante de Adam Prescott.

:: n-ésima-palabra () / :: primera-palabra / :: última-palabra / :: n-ésima-última-palabra ()

Actualmente no tenemos pseudoelementos basados ​​en palabras. Nosotros tenemos word-spacing aunque, lo cual es notable.

Un caso de uso es similar a usar ::first-letter para mayúsculas, solo haciendo una palabra completa.

article p::first-word {
  float: left;
  font-size: 300%;
  margin: 0 10px 10px 0;
}

También similar al “desvanecimiento” de las líneas anteriores, podríamos desvanecer un pasaje palabra por palabra usando ::nth-last-word(n).

:: n-ésima-letra () / :: última-letra () / :: n-ésima-última-letra ()

Nosotros ya tenemos ::first-letter, que tiene un uso bastante decente, así que ¿por qué no completar el conjunto?

De todos estos selectores “nuevos”, ::nth-letter es probablemente el más útil. Por ejemplo, Lettering.js envuelve letras en s para nosotros para que podamos seleccionar letras individuales. Esto sería completamente innecesario con ::nth-letter.

Toma este ejemplo:

h1.fancy::nth-letter(n) {
  display: inline-block;
  padding: 20px 10px;
}
h1.fancy::nth-letter(odd) {
  transform: skewY(15deg);
  background: url(light-red-pattern.png);
}
h1.fancy::nth-letter(even) {
  transform: skewY(-15deg);
  background: url(dark-red-pattern.png);
}
h1.fancy::nth-word(n) {
  margin-right: 20px;
}
h1.fancy::last-word {
  margin-right: 0;
}

Consulte todos los ejemplos en Lettering.js; todos ellos son buenos ejemplos de la necesidad de esto.

Otro ejemplo de combinación de palabra / letra es una “letra” formal, como:

Dear Emily,

yadda yadda yadda.

Love, Chris.

Quizás esta “carta” sea generada por contenido dinámico de una base de datos, pero queremos asegurar el uso adecuado de mayúsculas y el estilo de las líneas de apertura y cierre.

.letter p:first-child::nth-word(-n+2)::nth-letter(1),
.letter p:last-child:nth-word(-n+2):nth-letter(1) {
  text-transform: uppercase;
}

El conjunto completo

Entonces, si obtenemos todo esto, el conjunto completo sería:

:first-child        :first-of-type        :only-child
:last-child         :last-of-type         :only-of-type                  
:nth-child          :nth-of-type    
:nth-last-child     :nth-last-of-type

::first-letter      ::first-line          ::first-word
::last-letter       ::last-line           ::last-word
::nth-letter        ::nth-line            ::nth-word
::nth-last-letter   ::nth-last-line       ::nth-last-word 

Una vez más, solo una ilusión. Si hay alguien a quien pueda poner esto delante que pueda hacer algo al respecto, lo haré. Y también lo mantendré actualizado con los comentarios, positivos o negativos.

Para el registro, esta no es una solicitud nueva. Anne van Kesteren lo pidió en 2003.