CSS :dir Selector
Last Updated :
22 Aug, 2022
: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:
Share your thoughts in the comments
Please Login to comment...