https://github.com/perry-mitchell/css-selector-splitter

Split CSS selectors by commas or blocks
https://github.com/perry-mitchell/css-selector-splitter

css-selector css-selector-parser css-selectors query splitting

Last synced: 4 months ago
JSON representation

Split CSS selectors by commas or blocks

• Host: GitHub
• URL: https://github.com/perry-mitchell/css-selector-splitter
• Owner: perry-mitchell
• License: mit
• Created: 2016-08-22T07:59:21.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-24T06:29:28.000Z (over 8 years ago)
• Last Synced: 2024-10-08T23:42:21.485Z (4 months ago)
• Topics: css-selector, css-selector-parser, css-selectors, query, splitting
• Language: JavaScript
• Size: 14.6 KB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# css-selector-splitter

Split CSS selectors by commas or blocks

[![Build Status](https://travis-ci.org/perry-mitchell/css-selector-splitter.svg?branch=master)](https://travis-ci.org/perry-mitchell/css-selector-splitter)

## Compatibility

Node v6 is supported (full ES6).

## Why make this?

_Are their other splitting libraries? Do they do the same thing as yours?_

Yes and somewhat. This library allows for splitting of relationship blocks too: "div > a ~ p". Other libraries that I've tested also don't cater for text within attribute values, so [splitting fails](https://github.com/joakimbeng/split-css-selector/issues/1) if certain characters are encountered within these fields.

## Usage

Simply require the main function:

```

const splitSelector = require("css-selector-splitter");

let selectors = splitSelector("div#gallery, div.slide"); // ["div#gallery", "div.slide"]

```

This library also supports the splitting of relationship blocks:

```

const splitSelectorBlocks = require("css-selector-splitter").splitSelectorBlocks;

let items = splitSelectorBlocks("div.level1 div#level2 > span.level3 ~ p");

// returns:

// {

//   selectors: [

//     "div.level1",

//     "div#level2",

//     "span.level3",

//     "p"

//   ],

//   joiners: [

//     " ",

//     ">",

//     "~"

//   ]

// }

```

You can join selectors as well:

```

const joinSelector = require("css-selector-splitter").joinSelector;

let selector = joinSelector(["div.a", "div.b"], [">"]); // this can also be output from 'splitSelectorBlocks'

// returns: "div.a > div.b"

```