CSS :dir Selector Last Updated : 22 Aug, 2022 Comments Improve Suggest changes Like Article Like Report :dir is used to select and change the properties of the text element having direction left to right or right to left. Syntax: :dir(ltr|rtl) Parameters: It accepts the following two parameters. ltr: This keyword basically looks for elements having direction from left to right.rtl: This keyword basically looks for elements having direction from right to left. Note: Please run the code in Firefox browser. Example: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ color:#fff; width: 300px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; padding-top: 5px; } :dir(rtl) { background-color: black; } :dir(ltr) { background-color: green; } </style> <body> <div dir="rtl"> Geeks for geeks </div> <div dir="ltr"> Geeks for geeks <div dir="rtl">???? ?? ??? ????</div> </div> </body> </html> Output: Example 2: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ color:#fff; width: 300px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; padding-top: 5px; } h1{ color: #000; } :dir(rtl) { background-color: green; } </style> <body> <h1>dir="auto"</h1> <div dir="auto">???? ?? ??? ????</div> </body> </html> Output: Supported Browsers: Firefox 49.0 Comment More infoAdvertise with us Next Article CSS :dir Selector T tarun007 Follow Improve Article Tags : Web Technologies CSS CSS-Selectors Similar Reads CSS :is() Selector The CSS :is() pseudo-class selector allows you to group multiple selectors into one, selecting elements that match any of the specified selectors.Simplifies code by reducing redundancy in selector definitions.Useful for applying styles to multiple elements with shared properties.Improves efficiency 3 min read CSS :not Selector The :not(selector) selector is used to style every element that is not specified by the given selector. Known as the negation pseudo-class, it allows developers to exclude specific items from being selected.Syntax::not(selector) { //CSS Property}Usage ExamplesExample 1This example demonstrates the u 2 min read CSS :any-link Selector The :any-link selector is used to style every <a>, <area>, or <link> element that has an "href" attribute .It will skip applying CSS properties for those <a>, <area>, <href> tags in which "href" is not defined. Hence, it matches all elements that match :link or :v 2 min read CSS ::selection Selector The ::selection CSS pseudo-element allows you to style the part of a webpage that users highlight, such as when they drag the mouse over text. It’s a simple way for developers to customize the appearance of selected text, improving the overall user experience. However, only a few CSS properties can 2 min read CSS element Selector The element selector in CSS is used to select HTML elements that are required to be styled. In a selector declaration, there is the name of the HTML element and the CSS properties which are to be applied to that element is written inside the brackets {}. Syntax:element { \\ CSS property}Example 1: T 2 min read Like