:lang() and :dir()
:lang() matches elements based on the document language. :dir() matches based on text direction (ltr or rtl), enabling internationalized styling.
CSS
Advanced
5 min read
:lang() and :dir() Pseudo-Classes
Example
/* Different quotes per language */
:lang(en) q { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(fr) q { quotes: "\00AB" "\00BB"; }
/* RTL layout adjustments */
:dir(rtl) .icon { margin-left: 0; margin-right: 0.5rem; }
/* Logical properties auto-adjust for direction */
.card {
padding-inline-start: 1rem; /* left in LTR, right in RTL */
border-inline-start: 3px solid blue;
} Pro Tip
Use CSS logical properties (margin-inline-start, padding-block-end) instead of directional ones for automatic RTL support.