https://github.com/chantastic/map-pseudo-classes
Using JS map() to implement CSS psuedo-classes
https://github.com/chantastic/map-pseudo-classes
Last synced: 2 months ago
JSON representation
Using JS map() to implement CSS psuedo-classes
- Host: GitHub
- URL: https://github.com/chantastic/map-pseudo-classes
- Owner: chantastic
- Created: 2015-06-09T05:02:27.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-09T06:34:51.000Z (about 11 years ago)
- Last Synced: 2025-03-22T03:11:38.406Z (about 1 year ago)
- Language: JavaScript
- Size: 352 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
### map-pseudo-classes
*Using JS map() to implement CSS psuedo-classes*
---
These examples demonstrate how to simulate psuedo-classes with `map()`.
Using React.js, it's become popular to use inline-styles. In the examples directory are a few components that demonstrate how you might reproduce the affects of some `pseude-classes` without CSS.
### Examples
* [:first-child](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/FirstChild.js#L7)
* [:last-child](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/LastChild.js#L7)
* [:only-child](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/OnlyChild.js#L7)
* [:nth-child(n)](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/NthChildN.js#L13)
* [:nth-child(odd)](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/NthChildOdd.js#L7)
* [:nth-child(even)](https://github.com/chantastic/map-pseudo-classes/blob/master/examples/NthChildEven.js#L7)
### View Examples
* clone the repo: `git clone git@github.com:chantastic/map-pseudo-classes.git`
* cd into your new copy: `cd map-psuedo-classes`
* start a server `python -m SimpleHTTPServer`
* visit `localhost:8000`
### Anti-usage
These components are worthless. Don't use them as components. Just steal the bits expressions.
<3 [chantastic](http://twitter.com/chantastic)