Direct Link to Article — Permalink

HTML5 Progress Bars is a post from CSS-Tricks

Direct Link to Article — Permalink

WebKit Selector Performance Changes is a post from CSS-Tricks

Direct Link to Article — Permalink

Responsive Multi Column Data Tables is a post from CSS-Tricks

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

We also get a couple of text-specific pseudo elements to help with our typography needs:

::first-letter
//AN_Xml:::first-line

That's a great start, but it really would be useful if we could extend the whole ":nth" concept to these typographic selectors. Let me convince you.

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

We already have ::first-line, so to complete the set let's add ::nth-line(), ::last-line, and ::nth-last-line().

With these, we could select the first two lines of a poem to highlight.

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

Or perhaps we could fade out the end of a passage.

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

If we were allowed to use generated content on these line pseudo elements, we could accomplish something like line numbering without having to resort to intrusive markup.

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

Relevant article by Adam Prescott.

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

We currently don't have any word-based pseudo elements. We do have word-spacing though, which is notable.

One use case is similar to using ::first-letter for drop caps, only doing a whole word.

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

Also similar to the "fade out" of lines above, we could fade out a passage word-by-word using ::nth-last-word(n).

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

We already have ::first-letter, which sees pretty decent usage, so why not complete the set?

Of all of these "new" selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in <span>s for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter.

Take this example:

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

Check out all the examples at Lettering.js -- all of those are good examples of the need for this.

Another word/letter combination example is a formal "letter", like:

<p>Dear Emily,</p>
//AN_Xml:<p>yadda yadda yadda.</p>
//AN_Xml:<p>Love, Chris.</p>

Perhaps this "letter" is generated by dynamic content from a database, but we want to ensure the proper capitalization and style of the opening and closing lines.

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

The Complete Set

So if we get all of this, the complete set would be:

:first-child        :first-of-type        :only-child
//AN_Xml::last-child         :last-of-type         :only-of-type
//AN_Xml::nth-child          :nth-of-type
//AN_Xml::nth-last-child     :nth-last-of-type
//AN_Xml:
//AN_Xml:::first-letter      ::first-line          ::first-word
//AN_Xml:::last-letter       ::last-line           ::last-word
//AN_Xml:::nth-letter        ::nth-line            ::nth-word
//AN_Xml:::nth-last-letter   ::nth-last-line       ::nth-last-word 

Again, just wishful thinking. If there is anyone I can put this in front of that can do something about it, I will. And I'll also keep this updated with the feedback on it, positive or negative.

For the record, this isn't a new request. Anne van Kesteren called for it in 2003.

A Call for ::nth-everything is a post from CSS-Tricks