Hacker News Reader

Hacker News

Comment by thekingshorses | Hacker News Reader

Full thread

thekingshorses

Where exactly one uses nth-selector other than to style first/last and even/odd items?

We are using nth-selector to style icon for nav items, which IMO is a wrong way of styling nav items.

There are some good CSS <del>selector</del> properties like position sticky but not available in most browsers :(

View on HN

> There are some good CSS selector like position sticky but not available in most browsers

position:sticky isn't a selector.

    <selector> {<property>: <value>}

:shame:

It's not a selector, it's a property. It exists, but support is not good. It's been behind a flag in Chrome for over well two years. http://caniuse.com/#search=sticky

You can use nth-child/nth-last-child for much more than table even/odd styling. It can be used to style children based on the number of siblings they have, build grids out of list items, or style grid interval tick marks on a timeline off the top of my head.

A cleaner way of targeting elements with a specific number of children exists using EQCSS for Element Queries:

   @element '.sidebar' and (max-children: 5) {

     .widget h3 {
       font-size: 125%;
     }

   }

Check out the min-children/max-children examples on: http://elementqueries.com/test.html

Earlier post from the same blog, showing usage for building image grids:

http://grack.com/blog/2015/01/09/abusing-css3-selectors/

I find it useful for creating pseudo random unit tests, targeting specific elements on the page.

Reply on news.ycombinator.com