# postcss-dir-pseudo-class > Use the :dir pseudo-class in CSS Latest version **10.0.0** (published 2026-01-14) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install postcss-dir-pseudo-class pnpm add postcss-dir-pseudo-class yarn add postcss-dir-pseudo-class bun add postcss-dir-pseudo-class ``` ## Health **Score 55/100 (C)** — status: stable. Positive: esm support; no vulnerabilities; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 10.0.0 | | Published | 2026-01-14 | | First published | 2017-06-01 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 1 | | Unpacked size | 9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1053 | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | attribute, css, directionality, directions, left, left-to-right, ltr, polyfill, postcss, postcss-plugin, right, right-to-left, rtl, selector | ## Links - npm: https://www.npmjs.com/package/postcss-dir-pseudo-class - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/postcss-dir-pseudo-class ## Dependencies (1) - [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^7.1.1 ## 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 - 10.0.0 (latest) — 2026-01-14 - 9.0.1 — 2024-10-23 - 9.0.0 — 2024-08-03 - 8.0.1 — 2023-12-15 - 8.0.0 — 2023-07-03 - 7.0.2 — 2023-02-06 - 7.0.1 — 2023-01-28 - 7.0.0 — 2023-01-24 - 6.0.5 — 2022-07-08 - 6.0.4 — 2022-02-05 - 6.0.3 — 2022-01-12 - 6.0.2 — 2022-01-02 - 6.0.1 — 2021-12-13 - 6.0.0 — 2021-09-17 - 5.0.0 — 2018-09-18 - … 6 more at https://npm.io/package/postcss-dir-pseudo-class/versions ## README # PostCSS Dir Pseudo Class [PostCSS Logo][PostCSS] `npm install postcss-dir-pseudo-class --save-dev` [PostCSS Dir Pseudo Class] lets you style by directionality using the `:dir()` pseudo-class in CSS, following the [Selectors] specification. ```css article h3:dir(rtl) { margin-right: 10px; } article h3:dir(ltr) { margin-left: 10px; } /* becomes */ [dir="rtl"] article h3 { margin-right: 10px; } [dir="ltr"] article h3 { margin-left: 10px; } ``` ### Maintaining Specificity Using [PostCSS Dir Pseudo Class] will not impact selector weight, but it will require having at least one `[dir]` attribute in your HTML. If you don’t have _any_ `[dir]` attributes, consider using the following JavaScript: ```js // force at least one dir attribute (this can run at any time) document.documentElement.dir=document.documentElement.dir||'ltr'; ``` If you absolutely cannot add a `[dir]` attribute in your HTML or even force one via JavaScript, you can still work around this by presuming a direction in your CSS using the [`dir` option](#dir), but understand that this will sometimes increase selector weight by one element (`html`). ## Usage Add [PostCSS Dir Pseudo Class] to your project: ```bash npm install postcss postcss-dir-pseudo-class --save-dev ``` Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); postcss([ postcssDirPseudoClass(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## Options ### preserve The `preserve` option determines whether the original notation is preserved. By default, it is not preserved. ```js postcssDirPseudoClass({ preserve: true }) ``` ```css article h3:dir(rtl) { margin-right: 10px; } article h3:dir(ltr) { margin-left: 10px; } /* becomes */ [dir="rtl"] article h3 { margin-right: 10px; } article h3:dir(rtl) { margin-right: 10px; } [dir="ltr"] article h3 { margin-left: 10px; } article h3:dir(ltr) { margin-left: 10px; } ``` ### dir The `dir` option allows you presume a direction in your CSS. By default, this is not specified and you are required to include a direction `[dir]` attribute somewhere in your HTML, preferably on the `html` element. ```js postcssDirPseudoClass({ dir: 'ltr' }); ``` ```css article h3:dir(rtl) { margin-right: 10px; } article h3:dir(ltr) { margin-left: 10px; } /* becomes */ [dir="rtl"] article h3 { margin-right: 10px; } html:not([dir="rtl"]) article h3 { margin-left: 10px; } ``` ```js postcssDirPseudoClass({ dir: 'rtl' }); ``` ```css article h3:dir(rtl) { margin-right: 10px; } article h3:dir(ltr) { margin-left: 10px; } /* becomes */ html:not([dir="ltr"]) article h3 { margin-right: 10px; } [dir="ltr"] article h3 { margin-left: 10px; } ``` ### shadow The `shadow` option determines whether the CSS is assumed to be used in Shadow DOM with Custom Elements. ```js postcssDirPseudoClass({ shadow: true }) ``` ```css article h3:dir(rtl) { margin-right: 10px; } article h3:dir(ltr) { margin-left: 10px; } /* becomes */ :host-context([dir="rtl"]) article h3 { margin-right: 10px; } :host-context([dir="ltr"]) article h3 { margin-left: 10px; } ``` [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#dir-pseudo-class [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class [PostCSS]: https://github.com/postcss/postcss [PostCSS Dir Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class [Selectors]: https://www.w3.org/TR/selectors-4/#the-dir-pseudo --- _Source: https://npm.io/package/postcss-dir-pseudo-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._