PostCSS Dir Pseudo Class
PostCSS Dir Pseudo Class lets you style by directionality using the :dir()
pseudo-class in CSS, following the Selectors specification.
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:
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, but understand that this will sometimes increase selector weight by one element (html
).
Usage
Add PostCSS Dir Pseudo Class to your project:
Use PostCSS Dir Pseudo Class to process your CSS:
Or use it as a PostCSS plugin:
PostCSS Dir Pseudo Class runs in all Node environments, with special instructions for:
Options
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.
Here’s an example of using the dir
option to presume a left-to-right direction:
preserve
The preserve
option determines whether the original :dir()
rule should remain in the CSS. By default, the original rule is not preserved.
Last updated