Skip to content

chantastic/pseudo-class

Repository files navigation

Circle CI

Psuedo

WIP

A small set of functions for pseudo-class-like logic logic in JavaScript. I'm using it with React and inline-styles in mind. I don't see why you couldn't use it elsewhere.

Why?

These are pretty simple expressions. I see this being more useful as a resource than a library. Cheat-sheets are boring. This is living.

Usage in React

In React render function, it can be used like so:

{this.props.item.map((item, i, arr) => {
  return (
    <li style={Object.assign{
     {},
     lastChild(i,arr): { backgroundColor: "#eee" }
    }}>
      {item}
    </li>
  );
})};

If you're not familiar with Object.assign, it's just a way of merging objects from right to left. _.extend could serve the same purpose.

Capabilities

This is a map of pseudo-classes to available functions.

item
:first-child         firstChild(i)
:last-child          lastChild(i, arr)

:only-child          onlyChild(i, arr)

:nth-child(even)     evenChildren(i)
:nth-child(odd)      oddChildren(i)

:nth-child(n)        nthChild(n, i)
:nth-last-child(n)   nthLastChild(n, i, arr)

:nth-child(-n+3)     firstChildren(n, i)
collection
:empty               empty(arr)

Why not use the same names?

:nth-child is a pretty overloaded selector. I really don't want to get into parsing.

Is this exhaustive?

Nope. I've added those most common me. Happy to add more if useful.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published