PostCSS Dir Pseudo Class
Last updated
Last updated
PostCSS Dir Pseudo Class lets you style by directionality using the :dir()
pseudo-class in CSS, following the Selectors specification.
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
).
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:
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:
The preserve
option determines whether the original :dir()
rule should remain in the CSS. By default, the original rule is not preserved.