Use the :dir pseudo-class in CSS
npm install postcss-dir-pseudo-classnpm 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;
}
`
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[dir]
_any_ 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 onedir
via JavaScript, you can still work around this by presuming a direction in your
CSS using the option, but understand that this willhtml
sometimes increase selector weight by one element ().
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 /);
`
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;
}
`
The dir option allows you presume a direction in your CSS. By default, this[dir]
is not specified and you are required to include a direction attributehtml
somewhere in your HTML, preferably on the 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;
}
`
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