Ein Aufruf für ::nth-alles

Mit CSS3 haben wir positionsbezogene Pseudoklassen-Selektoren, die uns helfen, bestimmte Elemente auszuwählen, wenn keine anderen unterscheidenden Merkmale vorhanden sind, außer wo sie sich im DOM in Bezug auf ihre Geschwister befinden.

: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

Wir erhalten auch ein paar textspezifische Pseudoelemente, die uns bei unseren typografischen Bedürfnissen helfen.

::first-letter
::first-line

Das ist ein guter Anfang, aber es wäre wirklich nützlich, wenn wir das ganze „:nth“-Konzept auf diese typografischen Selektoren ausweiten könnten. Lassen Sie mich Sie überzeugen.

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

Wir haben bereits ::first-line, also um das Set zu vervollständigen, fügen wir ::nth-line(), ::last-line und ::nth-last-line() hinzu.

Damit könnten wir die ersten beiden Zeilen eines Gedichts auswählen, um sie hervorzuheben.

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

Oder vielleicht könnten wir das Ende einer Passage ausblenden.

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%
}

Wenn wir generierte Inhalte auf diesen Zeilen-Pseudoelementen verwenden dürften, könnten wir Zeilennummerierungen erreichen, ohne auf aufdringliche Markups zurückgreifen zu müssen.

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

Relevanter Artikel von Adam Prescott.

::nth-word() / ::first-word / ::last-word / ::nth-last-word()

Derzeit haben wir keine wortbasierten Pseudoelemente. Wir haben jedoch word-spacing, was bemerkenswert ist.

Ein Anwendungsfall ist ähnlich wie bei ::first-letter für Drop Caps, nur dass es sich um ein ganzes Wort handelt.

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

Ähnlich wie beim „Ausblenden“ der obigen Zeilen könnten wir eine Passage Wort für Wort mit ::nth-last-word(n) ausblenden.

::nth-letter() / ::last-letter() / ::nth-last-letter()

Wir haben bereits ::first-letter, das recht häufig genutzt wird, warum also nicht das Set vervollständigen?

Von all diesen „neuen“ Selektoren ist ::nth-letter wahrscheinlich am nützlichsten. Zum Beispiel verpackt Lettering.js Buchstaben in <span></span>-Tags für uns, damit wir einzelne Buchstaben auswählen können. Mit ::nth-letter wäre das völlig unnötig.

Nehmen Sie dieses Beispiel

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

Schauen Sie sich alle Beispiele unter Lettering.js an – all diese sind gute Beispiele für die Notwendigkeit davon.

Ein weiteres Beispiel für eine Wort-/Buchstabenkombination ist ein förmlicher „Brief“, wie

Dear Emily,

yadda yadda yadda.

Love, Chris.

Vielleicht wird dieser „Brief“ durch dynamische Inhalte aus einer Datenbank generiert, aber wir wollen die korrekte Großschreibung und den Stil der Eröffnungs- und Schlusszeilen sicherstellen.

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

Das vollständige Set

Wenn wir also all das bekommen, wäre das vollständige Set

: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 

Auch hier nur Wunschdenken. Wenn es jemanden gibt, dem ich das vorlegen kann, der etwas dagegen tun kann, werde ich es tun. Und ich werde dies auch mit Feedback, ob positiv oder negativ, auf dem neuesten Stand halten.

Fürs Protokoll, dies ist keine neue Anfrage. Anne van Kesteren forderte es im Jahr 2003.