https://github.com/tomhodgins/jsincss-previous-selector
A previous selector plugin for jsincss
https://github.com/tomhodgins/jsincss-previous-selector
css css-selector js-in-css jsincss previous previous-selector previous-sibling selector-resolver sibling
Last synced: 4 months ago
JSON representation
A previous selector plugin for jsincss
- Host: GitHub
- URL: https://github.com/tomhodgins/jsincss-previous-selector
- Owner: tomhodgins
- License: mit
- Created: 2018-01-27T20:19:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-24T20:57:14.000Z (over 7 years ago)
- Last Synced: 2025-09-30T18:33:27.188Z (8 months ago)
- Topics: css, css-selector, js-in-css, jsincss, previous, previous-selector, previous-sibling, selector-resolver, sibling
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsincss-previous-selector
A previous selector plugin for [jsincss](https://github.com/tomhodgins/jsincss)
## About
This plugin is a JavaScript module that works with [JS-in-CSS stylesheets](https://responsive.style/theory/what-is-a-jic-stylesheet.html), to select the element before the element(s) matching a selector.
## Downloading
You can download jsincss-previous-selector and add it to your codebase manually, or download it with npm:
```bash
npm install jsincss-previous-selector
```
Another option that works for building or testing, that isn't ideal for production use, is linking to the module directly from a CDN like unpkg:
```html
import previous from 'https://unpkg.com/jsincss-previous-selector/index.vanilla.js'
```
## Importing
This plugin exists in three different formats:
- CommonJS module: [index.js](index.js)
- Vanilla JS module: [index.vanilla.js](index.vanilla.js)
- Browser function: [index.browser.js](index.browser.js)
You can import this plugin using the native [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) statement in JavaScript. Here you can assign any name you want to the function you are importing, and you only need to provide a path to the plugin's `index.vanilla.js` file:
```js
import previous from './index.vanilla.js'
```
You can also use the CommonJS-formatted module located at [index.js](index.js) with `require()` for use with bundlers that don't use vanilla JS modules.
Once you have imported this plugin into your module, you can use the plugin as `previous()`
## Using JS-in-CSS Stylesheets
The main goal of this plugin is to allow CSS authors the ability to target the elements directly preceding element(s) that match a CSS selector in the document.
The plugin has the following format:
```js
previous(selector, rule)
```
- `selector` is a string containing a CSS selector
- `rule` is a string or template string containing a CSS rule
## Example
This example will use the `jsincss` plugin to load a JS-in-CSS stylesheet making use of this plugin. To test it in a JavaScript module, import both the `jsincss` package and any helper plugins you want:
```html
import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
import previous from 'https://unpkg.com/jsincss-previous-selector/index.vanilla.js'
jsincss(() => `
${previous('li:last-of-type', `
background: lime;
`)}
`)
```
It's also possible to write your stylesheets as a separate JavaScript module like this, where you import any helper plugins at the top of the stylesheet:
```js
import previous from 'https://unpkg.com/jsincss-previous-selector/index.vanilla.js'
export default () => `
${previous('li:last-of-type', `
background: lime;
`)}
`
```
And then import both the `jsincss` plugin and the stylesheet into your code and run them like this, suppling any `selector` or `events` list the `jsincss` plugin might need to apply the stylesheet only the the element(s) and event(s) you require, depending on what you're doing:
```js
import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
import stylesheet from './path/to/stylesheet.js'
jsincss(stylesheet)
```
## Compatible JS-in-CSS Stylesheet Loaders
- [jsincss](https://github.com/tomhodgins/jsincss)