[selector] CSS - :dir() 가상선택자 - 지정된 텍스트 방향 갖는 요소 선택 (= dir선택자 = 디르선택자/디렉션선택자)

:dir() 예제 - 지정된 텍스트 방향 갖는 요소 선택

(예) 오른쪽에서 왼쪽 방향으로 진행되는 텍스트 가진 요소의 배경색 변경.

 

<style> 

:dir(rtl) { background-color: yellow;}

</style>

<p>홈짱닷컴 Homzzang.com</p>

<p dir="rtl">HTML CSS JavaScript</p>

<p dir="ltr">그누보드 제작관리유지보수</p>

 

결과보기

:dir() 정의

 

지정된 텍스트 방향 갖는 모든 요소 선택하는 선택자.

• :dir(rtl) - 오른쪽에서 왼쪽으로 진행하는 텍스트 갖는 요소.
• :dir(ltr) - 왼쪽에서 오른쪽으로 진행하는 텍스트 갖는 요소.

 

---

PS.

• HTML 경우, dir 속성으로 텍스트 방향 지정.
• [dir=rtl] 속성선택자와 명시도 동일. 따라서, 나중 선언된 게 적용됨.
• CSS Selectors Level 4
• IE 제외한 주요 최신 브라우저 모두 지원.

 

:dir() 구문

 

:dir(ltr|rtl) {  CSS 선언; }