1. 4.14 Common idioms without dedicated elements
      1. 4.14.1 面包屑导航
      2. 4.14.2 标签云
      3. 4.14.3 对话
      4. 4.14.4 脚注
    2. 4.15 Disabled elements
    3. 4.16 使用选择符和 CSS 匹配 HTML 元素
      1. 4.16.1 CSS 'attr()' 函数的大小写敏感性
      2. 4.16.2 Case-sensitivity of selectors
      3. 4.16.3 Pseudo-classes

4.14 Common idioms without dedicated elements

4.14.1 面包屑导航

本规范没有提供机器可读的方式来描述面包屑导航彩蛋。 鼓励作者只是在段落中使用一些超链接。可以使用 nav 元素来标记包含这些段落的部分形成导航块。

在下面的例子中,当前页面可以通过两种路径到达。

<nav>
 <p>
  <a href="/">Main</a> ▸
  <a href="/products/">Products</a> ▸
  <a href="/products/dishwashers/">Dishwashers</a> ▸
  <a>Second hand</a>
 </p>
 <p>
  <a href="/">Main</a> ▸
  <a href="/second-hand/">Second hand</a> ▸
  <a>Dishwashers</a>
 </p>
</nav>

4.14.2 标签云

本规范没有定义任何专门标记一组页面的关键字列表(也称为 tag clouds)的标记。 通常,鼓励作者使用 ul 元素来标记这些列表。 其中写好计数并隐藏,再用样式表或 SVG 把它的效果呈现出来。

这是一个只有三个标签的标签云:

<style>
.tag-cloud > li > span { display: none; }
.tag-cloud > li { display: inline; }
.tag-cloud-1 { font-size: 0.7em; }
.tag-cloud-2 { font-size: 0.9em; }
.tag-cloud-3 { font-size: 1.1em; }
.tag-cloud-4 { font-size: 1.3em; }
.tag-cloud-5 { font-size: 1.5em; }

@media speech {
  .tag-cloud > li > span { display:inline }
}
</style>
...
<ul class="tag-cloud">
 <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
 <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">kiwi</a> <span>(rare)</span>
 <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>

每个标签实际的频率使用 title 属性给出。 提供了一个 CSS 样式表来把标记转化成一个不同大小的词的云, 但不支持 CSS 的或非视觉的用户代理中,包含类似 "(popular)" 或 "(rare)" 字样的标记也会把不同频率的标签分离开, 这样所有用户都可以得到这个信息。

使用 ul 元素(而不是 ol)是因为顺序并不重要: 虽然列表实际上是按字母顺序排列的,但如果按标签的长度排序,它将传达相同的信息。

tag rel 关键字 没有 用在这些 a 元素上, 因为它们表示的标签不适用于当前页面自己;它们只是列出标签本身的索引的一部分。

4.14.3 对话

本规范没有定义特定的元素来标记对话、会议记录、聊天记录、剧本中的对话、即时通信记录, 和其他有不同参与者轮流发言的场景。

但是鼓励作者使用 p 元素和标点来标记对话。 需要标记发言者来提供样式的情况,鼓励作者使用 spanb。 可以使用 i 元素包裹其内容的段落来标记对话的信息。

这个例子中,使用了 Abbot 和 Costello's 著名的喜剧 Who's on first 中的一个摘录:

<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p> Abbott: Every dollar of it.

下面的摘录演示了如何标记 IM 对话日志, 使用 data 元素来为每行提供 Unix 时间戳。 注意 time 元素不支持这个时间戳的格式,所以才使用了 data 元素(即 Unix time_t 时间戳)。 如果作者希望使用 time 元素支持的日期或时间格式来标记数据, 就要使用那个元素来替代 data。 这样的好处是数据分析工具可以无歧义地检测到时间戳,而不需要与网页作者协调。

<p> <data value="1319898155">14:22</data> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <data value="1319898192">14:23</data> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <data value="1319898200">14:23</data> <b>egof</b> it's unarguably
<p> <data value="1319898228">14:23</data> <i>* kaj blinks</i>
<p> <data value="1319898260">14:24</data> <b>kaj</b> you are not helping your case

HTML 没有一种好的方式来标记图形,因此游戏中交互式对话的描述很难标记出来。 这个例子展示了一个可能的惯例,使用 dl 元素来列出对话中每个点可能的回复。 可以考虑的另一个选择是以 DOT 文件的格式来描述对话,然后把结果输出为 SVG 图片放到文档中。[DOT]

<p> Next, you meet a fisher. You can say one of several greetings:
<dl>
 <dt> "Hello there!"
 <dd>
  <p> She responds with "Hello, how may I help you?"; you can respond with:
  <dl>
   <dt> "I would like to buy a fish."
   <dd> <p> She sells you a fish and the conversation finishes.
   <dt> "Can I borrow your boat?"
   <dd>
    <p> She is surprised and asks "What are you offering in return?".
    <dl>
     <dt> "Five gold." (if you have enough)
     <dt> "Ten gold." (if you have enough)
     <dt> "Fifteen gold." (if you have enough)
     <dd> <p> She lends you her boat. The conversation ends.
     <dt> "A fish." (if you have one)
     <dt> "A newspaper." (if you have one)
     <dt> "A pebble." (if you have one)
     <dd> <p> "No thanks", she replies. Your conversation options
     at this point are the same as they were after asking to borrow
     her boat, minus any options you've suggested before.
    </dl>
   </dd>
  </dl>
 </dd>
 <dt> "Vote for me in the next election!"
 <dd> <p> She turns away. The conversation finishes.
 <dt> "Madam, are you aware that your fish are running away?"
 <dd>
  <p> She looks at you skeptically and says "Fish cannot run, miss".
  <dl>
   <dt> "You got me!"
   <dd> <p> The fisher sighs and the conversation ends.
   <dt> "Only kidding."
   <dd> <p> "Good one!" she retorts. Your conversation options at this
   point are the same as those following "Hello there!" above.
   <dt> "Oh, then what are they doing?"
   <dd> <p> She looks at her fish, giving you an opportunity to steal
   her boat, which you do. The conversation ends.
  </dl>
 </dd>
</dl>

有些图中对话比较简单:每个角色只有一些确定的话要说。 这个例子中,一个游戏 FAQ/流程 列出了每个角色的一些已知的可能回应:

<section>
 <h1>Dialogue</h1>
 <p><small>Some characters repeat their lines in order each time you interact
 with them, others randomly pick from amongst their lines. Those who respond in
 order have numbered entries in the lists below.</small>
 <h2>The Shopkeeper</h2>
 <ul>
  <li>How may I help you?
  <li>Fresh apples!
  <li>A loaf of bread for madam?
 </ul>
 <h2>The pilot</h2>
 <p>Before the accident:
 <ul>
  <li>I'm about to fly out, sorry!
  <li>Sorry, I'm just waiting for flight clearance and then I'll be off!
 </ul>
 <p>After the accident:
 <ol>
  <li>I'm about to fly out, sorry!
  <li>Ok, I'm not leaving right now, my plane is being cleaned.
  <li>Ok, it's not being cleaned, it needs a minor repair first.
  <li>Ok, ok, stop bothering me! Truth is, I had a crash.
 </ol>
 <h2>Clan Leader</h2>
 <p>During the first clan meeting:
 <ul>
  <li>Hey, have you seen my daughter? I bet she's up to something nefarious again...
  <li>Nice weather we're having today, eh?
  <li>The name is Bailey, Jeff Bailey. How can I help you today?
  <li>A glass of water? Fresh from the well!
 </ul>
 <p>After the earthquake:
 <ol>
  <li>Everyone is safe in the shelter, we just have to put out the fire!
  <li>I'll go and tell the fire brigade, you keep hosing it down!
 </ol>
</section>

4.14.4 脚注

HTML 没有标记脚注的专门机制。以下是建议的替代方案。


对于较短的行内注释,可以使用 title 属性。。

在这个例子中,对话框中有两部分是通过 title 属性, 使用类似脚注的内容注释的。

<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
>Watcha</span> mean, miss?
<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
closing for lunch</span>.

不幸的是,很多用户代理目前不鼓励依赖 title 属性, 它们没有按照本规范的要求把该属性以可访问的方式暴露出来。 (例如,需要类似鼠标的指点设备才能让提示显示出来,这就排除了纯键盘用户和触摸设备用户, 这里面包括任何一个使用现代手机和平板的用户)。

如果使用 title 属性,可以使用 CSS 来吸引读者注意 这个有 title 属性的元素。

例如,下面的 CSS 在有 title 属性的元素下面画了一条虚线。

[title] { border-bottom: thin dashed; }

对于更长的注释,应该使用 a 元素,指向文档后面的一个元素。 根据惯例,这个超链接的内容是一个方括号中的数字。

在这个例子中,对话框中的脚注链接到了对话框下面的一个段落。 然后这个段落又链接回对话框,让用户可以返回脚注的位置。

<p> Announcer: Number 16: The <i>hand</i>.
<p> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <em>do</em> you
contradict people?
<p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
...
<section>
 <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.</p>
</section>

对于适用于整个章节的文本(而非特定的词和句子)的更长的边栏笔记, 应该使用 aside 元素。

在这个例子中,对话框后给出了一个边栏,里面给出了一些上下文。

<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: I'm sorry?
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
<aside>
 <p>In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
</aside>

对图表而言,脚注可以包含在相关的 figcaptioncaption 元素中, 或者周围的文章中。

在这个例子中, 表格的单元格中有一些来自文章脚注。 使用了一个 figure 元素为表格和脚注一起给出了一个图例。

<figure>
 <figcaption>Table 1. Alternative activities for knights.</figcaption>
 <table>
  <tr>
   <th> Activity
   <th> Location
   <th> Cost
  <tr>
   <td> Dance
   <td> Wherever possible
   <td> £0<sup><a href="#fn1">1</a></sup>
  <tr>
   <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
   <td> Undisclosed
   <td> Undisclosed
  <tr>
   <td> Dining<sup><a href="#fn3">3</a></sup>
   <td> Camelot
   <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
 </table>
 <p id="fn1">1. Assumed.</p>
 <p id="fn2">2. Footwork impeccable.</p>
 <p id="fn3">3. Quality described as "well".</p>
 <p id="fn4">4. A lot.</p>
</figure>

4.15 Disabled elements

An element is said to be actually disabled if it is one of the following:

This definition is used to determine what elements are focusable and which elements match the :enabled and :disabled pseudo classes.

4.16 使用选择符和 CSS 匹配 HTML 元素

4.16.1 CSS 'attr()' 函数的大小写敏感性

CSS Values and Units 规范把 'attr()' 函数的属性名的大小写敏感性留给宿主语言来定义。 [CSSVALUES]

当比较 CSS 'attr()' 函数的属性名部分与 HTML 文档 中的 HTML 元素 的 无命名空间的属性名时, CSS 'attr()' 函数的属性名部分首先必须 转换为 ASCII 小写。 该函数与其他属性对比时必须根据它原有的大小写。 在上述两种情况下,比较过程都是大小写敏感的。

这与比较 CSS 属性选择器 的名字部分是一样的, 在下一节中说明。

4.16.2 Case-sensitivity of selectors

Selectors leaves the case-sensitivity of element names, attribute names, and attribute values to be defined by the host language. [SELECTORS]

When comparing a CSS element type selector to the names of HTML elements in HTML documents, the CSS element type selector must first be converted to ASCII lowercase. The same selector when compared to other elements must be compared according to its original case. In both cases, to match the values must be identical to each other (and therefore the comparison is case sensitive).

When comparing the name part of a CSS attribute selector to the names of attributes on HTML elements in HTML documents, the name part of the CSS attribute selector must first be converted to ASCII lowercase. The same selector when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive.

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive:

For example, the selector [bgcolor="#ffffff"] will match any HTML element with a bgcolor attribute with values including #ffffff, #FFFFFF and #fffFFF. This happens even if bgcolor has no effect for a given element (e.g., div).

The selector [type=a s] will match any HTML element with a type attribute whose value is a, but not whose value is A, due to the s flag.

All other attribute values and everything else must be treated as entirely identical to each other for the purposes of selector matching. This includes:

Selectors defines that ID and class selectors (such as #foo and .bar), when matched against elements in documents that are in quirks mode, will be matched in an ASCII case-insensitive manner. However, this does not apply for attribute selectors with "id" or "class" as the name part. The selector [class="foobar"] will treat its value as case-sensitive even in quirks mode.

4.16.3 Pseudo-classes

Pseudo-classes

There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements. [SELECTORS] [CSSUI]

:defined

:defined

Support in all current engines.

Firefox63+Safari10+Chrome54+
Opera41+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android63+Safari iOS10+Chrome Android54+WebView Android54+Samsung Internet6.0+Opera Android41+

The :defined pseudo-class must match any element that is defined.

:link

:link

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3.5+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS3.2+Chrome Android18+WebView Android1.5+Samsung Internet1.0+Opera Android14+
:visited

:visited

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3.5+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera Android10.1+

All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited.

Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

:active

:active

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera5+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

The :active pseudo-class is defined to match an element while an element is being activated by the user.

To determine whether a particular element is being activated for the purposes of defining the :active pseudo-class only, an HTML user agent must use the first relevant entry in the following list.

If the element has a descendant that is currently matching the :active pseudo-class

The element is being activated.

If the element is the labeled control of a label element that is currently matching :active

The element is being activated.

If the element is a button element
If the element is an input element whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state

The element is being activated if it is in a formal activation state and it is not disabled.

For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event.

If the element is an a element that has an href attribute
If the element is an area element that has an href attribute
If the element is a link element that has an href attribute
If the element is focusable

The element is being activated if it is in a formal activation state.

If the element is being actively pointed at

The element is being activated.

An element is said to be in a formal activation state between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior, or the time the element's activation behavior has finished running, which ever comes first.

An element is said to be being actively pointed at while the user indicates the element using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed; for a finger in a multitouch environment, while the finger is touching the display surface).

:hover

:hover

Support in all current engines.

Firefox1+Safari2+Chrome1+
Opera4+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

The :hover pseudo-class is defined to match an element while the user designates an element with a pointing device. For the purposes of defining the :hover pseudo-class only, an HTML user agent must consider an element as being one that the user designates if it is:

Consider in particular a fragment such as:

<p> <label for=c> <input id=a> </label> <span id=b> <input id=c> </span> </p>

If the user designates the element with ID "a" with their pointing device, then the p element (and all its ancestors not shown in the snippet above), the label element, the element with ID "a", and the element with ID "c" will match the :hover pseudo-class. The element with ID "a" matches it from condition 1, the label and p elements match it because of condition 2 (one of their descendants is designated), and the element with ID "c" matches it through condition 3 (its label element matches :hover). However, the element with ID "b" does not match :hover: its descendant is not designated, even though it matches :hover.

:focus

:focus

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera7+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

For the purposes of the CSS :focus pseudo-class, an element has the focus when:

:target

:target

Support in all current engines.

Firefox1+Safari1.3+Chrome1+
Opera9.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS2+Chrome Android18+WebView Android2+Samsung Internet1.0+Opera Android10.1+

For the purposes of the CSS :target pseudo-class, the Document's target elements are a list containing the Document's target element, if it is not null, or containing no elements, if it is. [SELECTORS]

:enabled

:enabled

Support in all current engines.

Firefox1+Safari3.1+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS2+Chrome Android18+WebView Android2+Samsung Internet1.0+Opera Android10.1+

The :enabled pseudo-class must match any button, input, select, textarea, optgroup, option, fieldset element, or form-associated custom element that is not actually disabled.

:disabled

:disabled

Support in all current engines.

Firefox1+Safari3.1+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS2+Chrome Android18+WebView Android2+Samsung Internet1.0+Opera Android10.1+

The :disabled pseudo-class must match any element that is actually disabled.

:checked

:checked

Support in all current engines.

Firefox1+Safari3.1+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS2+Chrome Android18+WebView Android2+Samsung Internet1.0+Opera Android10.1+

The :checked pseudo-class must match any element falling into one of the following categories:

:indeterminate

:indeterminate

Support in all current engines.

Firefox2+Safari3+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :indeterminate pseudo-class must match any element falling into one of the following categories:

:default

:default

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :default pseudo-class must match any element falling into one of the following categories:

:placeholder-shown

The :placeholder-shown pseudo-class must match any element falling into one of the following categories:

:valid

:valid

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :valid pseudo-class must match any element falling into one of the following categories:

:invalid

:invalid

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :invalid pseudo-class must match any element falling into one of the following categories:

:in-range

:in-range

Support in all current engines.

Firefox29+Safari5.1+Chrome10+
Opera11+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android16+Safari iOS5+Chrome Android18+WebView Android2.2+Samsung Internet1.0+Opera Android11+

The :in-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow.

:out-of-range

:out-of-range

Support in all current engines.

Firefox29+Safari5.1+Chrome10+
Opera11+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android16+Safari iOS5+Chrome Android18+WebView Android2.2+Samsung Internet1.0+Opera Android11+

The :out-of-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow.

:required

:required

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS5+Chrome Android18+WebView Android4.4.3+Samsung Internet1.0+Opera Android10.1+

The :required pseudo-class must match any element falling into one of the following categories:

:optional

:optional

Support in all current engines.

Firefox4+Safari5+Chrome10+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :optional pseudo-class must match any element falling into one of the following categories:

:read-only

:read-only

Support in all current engines.

Firefox78+Safari4+Chrome1+
Opera9+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android🔰 4+Safari iOS3.2+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+
:read-write

:read-write

Support in all current engines.

Firefox78+Safari4+Chrome1+
Opera9+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android🔰 4+Safari iOS3.2+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

The :read-only pseudo-class must match all other HTML elements.

:dir(ltr)

:dir

Support in one engine only.

Firefox49+SafariNoChromeNo
OperaNoEdgeNo
Edge (Legacy)NoInternet ExplorerNo
Firefox Android49+Safari iOSNoChrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

The :dir(ltr) pseudo-class must match all elements whose directionality is 'ltr'.

:dir(rtl)

The :dir(rtl) pseudo-class must match all elements whose directionality is 'rtl'.

This specification does not define when an element matches the :lang() dynamic pseudo-class, as it is defined in sufficient detail in a language-agnostic fashion in Selectors. [SELECTORS]