Stylus nth-of-m-child(n,m) Selector

.

As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector:

/**
 * :nth-of-m-child selector
 * This selector will select the 3rd child in a row of 5 elements
 */
span:nth-child(3):nth-last-child(3) {
  background: red;
}

The math behind it is easy: the value for the nth-child part in the selector is n, the value for the nth-last-child part in the selector is m - n + 1.

~

For a Stylus-based project I’m working on I was wondering if I could actually create this type of selector by name and also use it by its name. That way it’d save me some extra type and math work. Above that the resulting code would be more easy to understand.

After some fiddling I ended up with a function that returns the selector with its correct values injected:

// Selects child at position n in a group of m children
nth-of-m-child($n, $m)
  "nth-child(" + $n + "):nth-last-child(" + ($m - $n + 1) + ")"

The resulting selector – nth-of-m-child – can be used like any other pseudo selector right inside Stylus, but does need to be wrapped in between curly brackets in order for the returned string to be evaluated:

li
  // 1st out of 2
  &:{nth-of-m-child(1, 2)}
    background blue

  // 2nd out of 4
  &:{nth-of-m-child(2, 4)}
    background lime

  // 3rd out of 5
  &:{nth-of-m-child(3, 5)}
    background red

A demo pen with this code is embedded at the top of this post.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Kouto Swiss

kouto

Stylus is great, but… where’s my Compass/Bourbon?

Kouto Swiss offers an answer to that as it’ll make lots of handy functions and mixins available to you. Take this Kouto Swiss provided font-face function for example:

font-face( "Roboto", "./fonts/Roboto-Regular-webfont", normal )

Which will render into this:

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  src: url("./fonts/Roboto-Regular-webfont.eot");
  src: url("./fonts/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Regular-webfont.woff") format("woff"), url("./fonts/Roboto-Regular-webfont.ttf") format("truetype"), url("./fonts/Roboto-Regular-webfont.svg#Roboto") format("svg");
}

Looking back at my own code I wonder why I haven’t bundled my often used Stylus functions and mixins into one bundle before.

Kouto Swiss — A complete CSS framework for Stylus →

Pencil, a stylus from the makers of Paper

Great tools inspire great ideas. Pencil is the most natural and expressive tool for getting ideas on Paper. Advanced technology meets beautiful design to keep you in the flow, without needing to switch tools. With Erase, Blend, and adaptive Palm Rejection, Pencil puts creative possibility in your hands.

Neat that the back of the pencil actually works as an eraser. Be sure to check the product page, some neat “explosion” view of the stylus when scrolling up/down.

Pencil →

Reminds me of this Steve Jobs quote:

If you see a stylus, they blew it.

By the looks of it: not this stylus, Steve.