# csstoxpath

> CSS to XPath

Latest version **2.0.0** (published 2023-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install csstoxpath
pnpm add csstoxpath
yarn add csstoxpath
bun add csstoxpath
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-10-24 |
| First published | 2017-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 1 |
| Unpacked size | 39.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Pete Boere |
| Maintainers | pete_b |
| Keywords | xpath, css, css2xpath |

## Links

- npm: https://www.npmjs.com/package/csstoxpath
- Repository: https://github.com/peteboere/csstoxpath
- Homepage: https://github.com/peteboere/csstoxpath#readme
- Issues: https://github.com/peteboere/csstoxpath/issues
- npm.io page: https://npm.io/package/csstoxpath

## Dependencies (1)

- [css-what](https://npm.io/package/css-what.md) ~6.1.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2023-10-24
- 1.6.0 — 2021-02-12
- 1.5.0 — 2020-09-28
- 1.4.0 — 2018-08-18
- 1.3.0 — 2017-12-18
- 1.2.0 — 2017-12-14
- 1.1.1 — 2017-12-07
- 1.1.0 — 2017-12-07
- 1.0.0 — 2017-11-30

## README

# CSS to XPath

Converts most CSS 2.1/3 selectors (see exclusions below) to equivalent XPath 1.0 expression.

See `test.js` for examples.


## Extension pseudos

To take advantage of the different capabilities of XPath some additional pseudo selectors have been implemented:

#### `:text`

All text matching pseudo classes normalize whitespace and ignore tags.
E.g. `"  my   <i>string</i> "` is treated as `"my string"`.

* `:text("foo")` Case-insensitive matching of element text
* `:text-case("foo")` Case-sensitive `:text-case`
* `:text-contains("foo")` Case-insensitive substring matching of element text
* `:text-contains-case("foo")` Case-sensitive `:text-contains`
* `:text-start("foo")` Case-insensitive matching of element starting text
* `:text-start-case("foo")` Case-sensitive `:text-start`
* `:text-end("foo")` Case-insensitive matching of element ending text
* `:text-end-case("foo")` Case-sensitive `:text-end`

#### `:any`

Selectors containing multiple options, any one of which will be matched:

E.g: `div :any(ol, ul, dl) > *` equates to `div ol > *, div ul > *, div dl > *`

#### `:comment`

* `:comment` Select comment nodes
* `:comment(n)` Select comment nodes at child position `n`

Note: Can be combined with `:text` to match based on comment text content. E.g. `p > :comment:text("foo")`

#### `:childless`

As `:empty` but ignoring whitespace.


## Aliased pseudos

* `:first` is aliased to `:first-child`
* `:last` is aliased to `:last-child`
* `:child` is aliased to `:nth-child`
* `:contains` is aliased to `:text-contains`


## Author pseudos

Authored pseudos can serve as aliases to help simplify selector chains:

```js
/*
 * If the `pseudos` option is set the CSS expression is
 * preprocessed before generating the XPath expression:
 *
 * :radio
 * => input[type="radio"]
 *
 * :element-1(Hello)
 * => element:child(1):contains("Hello")
 */
const cssToXpath = require('csstoxpath');
const xpathExpr = cssToXpath(':radio, :element-1(Hello)', {
    pseudos: {
        radio: 'input[type="radio"]',
        [/element-(\d+)/]: (data, m) => `element:child(${m[1]}):contains("${data}")`,
    }
});
```

## Limitations

The following pseudos are partially supported as they require a tag context:

* `:nth-of-type`
* `:first-of-type`
* `:last-of-type`

The following pseudos are currently unsupported:

* `:nth-last-child`
* `:nth-last-of-type`

Dynamic pseudos are excluded as they can only be partially supported by attribute matching:

* `:checked`
* `:disabled`
* `:enabled`
* `:required`
* `:lang`

The following cannot be implemented in XPath 1.0:

* States: `:hover`, `:focus`, `:active`, `:visited`, `:target` etc.
* Elements: `::before`, `::after`, `::first-letter` etc.

---
_Source: https://npm.io/package/csstoxpath · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._