selectors4-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>Selectors Level 4 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">

<style>
.attr-state {
	font-family: sans-serif0, sans-serif;
}

#_overview_ tr.header1 {
	background: var(--O-bg);
	border-top: 2px inset var(--N-color);
	border-bottom: 1px solid var(--N-color);
	> th {
		font-weight: normal;
		> a:first-child{
			font-weight: bold;
		}
	}
}

@supports (grid-template-columns: subgrid) and (display: contents) {

#_overview_ {
	grid-template-columns: 4em 1fr 5em;
	min-width: 32em;
	max-width: 52em;
	tr {
		grid-template-areas:
			"pattern pattern pattern"
			". 対象 対象"
			". § level"
		;
		> *:nth-child(1) {
			grid-area: pattern;
			border-left-width: 0;
		}
		> *:nth-child(2) {
			grid-area: 対象;
		}
		> *:nth-child(3) {
			grid-area: §;
		}
		> *:nth-child(4) {
			grid-area: level;
		}
	}
}

}

</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand
	};
	Util.switchWordsInit(source_data);
}


function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w~一-鿆あ-ん\-]+|`(.+?)([$@§!\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'css':
	text = text.replace(/%(\w+)/g, "<var>$1</var>");
	break;
case 'ps':
	text = `:${key}`;
	key = key.replace(/\(.+\)/, '()');
	break;
case 'ps0':
	text = `:${key}`;
	klass= 'ps';
	break;
case 'PS': // pseudo-class section
	text = `§ <code class="pseudo">:${key}</code> 疑似類`;
	href = `#the-${key.replace(/\(\)/, '')}-pseudo`;
	break;
case 'pe':
	text = `::${key}`;
	break;
case 'at':
	text = `@${key}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'l':
	return `"<code class="literal">${text}</code>"`;
	break;
case 'U':
	text = `<span class="code-point">U+${key}</span> (<span class="char-symbol">&#x${key};</span>)`;
	break;
case 'U0':
	text = `U+${key}`;
	break;
case 'issue':
	text = `課題 #${key}`;
	href = `~CSSissue/${key}`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
default:
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	if(indicator === '§'){
		href = link_map[ `${key}§` ];
	} else {
		href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	}
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '§':
		text = `<a href="${href}">§ ${text}</a>`;
		break;
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}


}

</script>


<script type="text/plain" id="_source_data">


●●options

spec_title:Selectors Level 4
spec_date:2025-03-04
trans_update:2025-03-05
source_checked:220602
page_state_key:CSS
original_url:https://drafts.csswg.org/selectors-4/
	abbr_url:SELECTORS4
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:selector,css
conformance:css
copyright:2025,permissive


●●class_map
ps:pseudo
pe:pseudo
v:value
t:type
at:at-rule
p:property
e:element
a:attr
st:attr-state
css:css
P:production
jt:js-type
U0:code-point
cn:cp-name

●●tag_map
ps:code
pe:code
v:code
t:var
at:code
p:code
e:code
a:code
st:i
css:code
P:code
I:code
jt:code
c:code
U0:span
i:i
V:var
em:em
cn:span
cite:cite

●●ref_data

ITS20=副  momdo.github.io/its20/

●●words_table1
AnB:<code class="css"><var>A</var>n+<var>B</var></code>
AnBth:<a href="#AnB-notation">A×<var>n</var> + B 個目（ <var>n</var> ≥ 0 ）</a>
varS:<var>S</var>

●●words_table


	●構造／DOM
関係上の:relational::~
和集合:union:~
実体:entity::~
処理命令:processing instruction::~
doctype:
隣接性:adjacency:~
近隣:neighbors:~
循環依存:cycle:~
	~tree構造たる部分:tree-ness
	~treeに留まる:tree-abiding
	同胞~群:siblings
	親子関係:parentage／childhood relationship
	孫:grandchild
	最も近い先祖:innermost ancestor

	●構文
	トークン化器:tokenizer
部分文字列:substring::~
	空かどうか:emptiness
関数形:functional::~
文字大小比較:case sensitivity::文字大小の区別
	文字大小を区別:case-sensitive
小構文:microsyntax::~
縮約-:collapse::~

	接頭辞~付き:prefixed
	文法~上:grammatical
	尾部の:trailing
	等しい:equal to
	等しい:exactly equal to
	等しい:exactly
	等しい:being exactly
	等しい:has exactly
	等しい:having the exact value
	等しい:exact value
	等しい:beginning with
	一致する:is identical to
	一致する:with identical
	一致するかどうかの下で:"identical to" semantics
	前置-:prepend
	`has()^ps の中で許容される:has-allowed 

	●文字名
asterisk::::アスタリスク
tilde::::チルダ
backslash::::バックスラッシュ
	エスケープ処理
	~escape法:escaping
	空白:white space
	U+:pipe
	vertical bar
	sign:符号
正符号:plus sign:~
	:empty-or-whitespace-only
終止符:full stop:~
丸括弧:parentheses:~
角括弧:bracket:~
	閉じ〜:closing
番号記号:number sign:~

	●文書言語
DTD:
XHTML:
	どの名前空間にも属さない:no namespace
有修飾:qualified::~
修飾-:qualify::~
	局所的:local
	宣言-法:declaring
	宣言-済みでない:undeclared

subset::::サブセット
	空集合:nothing

	●内容言語
自然言語:language::~
	自然言語に関する:linguistic
wildcard::::ワイルドカード
	^en:subcode
書記体系:writing system::~
標準中国語:Chinese:~
方言:dialect:~
繁体字:traditional Chinese:~
下位tag:subtag::下位タグ

	~tagを伴わないもの:not tagged
	~tagとして〜を伴うもの:tagged as

	●CSS
発話:speech::~::スピーチ
下線:underline::~
書字:writing::~

	~style:style付けする
	~style付け状態:stylistic states
	~style付け／:styling
	疑似要素でない:non-pseudo
	／疑似要素:(or pseudo-element)

	●Selectors
Selectors:
	~level:Level
	^en:snapshot
詳細度:specificity::~
	詳細度 0:zero-specificity
	より詳細度が高い:more specific
	〜を成す各~選択子の詳細度のうち最も高いもの:specificity of the most specific selector
部分照合:substring matching::~::部分マッチ
無特能:featureless::~
	妥当性を~~検証しない:non-validating
	妥当なものとして:validly
選択-:select::~
選択:selection::~
	選択-済みなものがない:with no pre-selected choice

全称:universal::~
単純-:simple::~
疑似-:pseudo-::~

	複合-選択子
	複階-選択子
	全称~選択子
	子孫~選択子
	子~選択子
	型~選択子
	単純-選択子
	~class選択子
	相対~選択子
	属性~選択子
	~ID選択子
元素的:elemental:~
		basic
所属関係:association:~
	所属:membership
	所属:belong
格子構造:grid-structural::格子構造 ::グリッド構造

	~col結合子
	子孫~結合子
	直後~同胞:next-sibling
	後続~同胞:subsequent-sibling
広義-:inclusive:~
出自の:originating::~
	出自の要素:originate

	視野~付き:scoped
視野ng:scoping::視野::スコーピング
	視野ng根:Reference Element
絞込む:filterする::絞り込む
	絞り込み:-classing

	scoping-root:scoping root
	scoping-element:scoping 要素
virtual:

	●Selectors 疑似クラス
	疑似:pseudo
	~tree構造上の
変異能:mutability::~
否定:negation::~
論理和:matches-any::~
仮入力例示:placeholder-shown::~
仮入力:placeholder::~
	既定の~option
	選択肢:choices／:-
	選択-済み~option:selected-option

不定:indeterminate:~
必須随意:optionality::必須／随意
	随意:optional／必須:required

子付番:child-indexed::~
付番:index::~
	numbering:番号付け
	indexed

格子:grid::~::グリッド
字l:letter::字°
時系列再生:time-dimensional canvas:~
時系列順:time-based order:~
時系列:time-dimensional:~
現在-:current-:~
未来-:future-:~
過去:past:~
過去-:past-:~
	現在:currently-
	現在:currently
再生:playback::~
再生-:play::~
静止-:pause::~
seek:
停滞-:stall::~
音響:sound::~
	鳴らす:making
消音-:mute::~::ミュート
音量:volume::~
制限時間:timeout::~

	●:link, :visited
未訪問:unvisited:~
	~link元:source anchor
	ID-typed:ID型にされている
	素片~URL:fragment
	素片識別子

	●UI
	操作可否
	利用者~入力:user-input
強調-:highlight:~
hover:
非可視:hidden:~
隠す:hideする:~
隠され:hideされ:~
隠して:hideして:~
示して:showして:~
外形線:outline::~
	choices／
環:ring::~
押して:pressして:~
離す:releaseする:~
touch::::タッチ
	~touch~screen:touchscreen
埋めら:fillさ:~
埋尽く:fillし尽:埋め尽く
	埋尽くされ:filled out
fullscreen::::全スクリーン
touchscreen::::タッチスクリーン
picture-in-picture:
退けら:dismissさ:~
開かれ:openされ:~
開いた:openした:~
開な:open:開いた
閉な:closed:閉じた
	開閉~状態:collapse state
排他的:exclusive:~
素早く:quickに:~
手指:finger:指
首:primary:~
新規:fresh:~
打込む:typeする:打ち込む
drag::::ドラッグ

	~focusを得ている:focused
	hovering:hover 状態
	hovered-over
	未入力:omitted-but-required／:blank-but-
	完了~~率:percent completion
	黄色い:yellow
	~~太くされた:bold
	~~太く:strong
	空欄:blank
	受取れる:able to receive
	占める:take up
	印刷-:printout
	見て:look
	得る:gain
	~~認識:say

	●UI 部品／機器
check::::チェック
	checkされていない:unchecked
	checkされた状態／状態:checked
pointing::::ポインタ指示
接触判定:hit-testing:~
	labelが付与された:labelled
popup::::ポップアップ
popover:
	~popoverを示している:popover-showing
	~popoverを隠している:popover-hidden
進捗計:progress meter::~::プログレスメータ
radio::::ラジオ
checkbox::::チェックボックス
slider::::スライダ
select::選択::セレクト
pen::::ペン
bookmark::::ブックマーク

	~URL~bar:address bar

	●保安
露呈-:reveal:露わに
広告:advertisement:~
区分-:partition:~
軍拡競争:arms race:~

	~~漏らさない~~労を~~怠った:not careful to screen from
	調べる:see
	嘘をつく:lie
	つまるところ:ultimately
	勝利し得ない:can’t be won

	●仕様
創出-:create:~
仕様化-:specify:~
分類-:classify:~
上限:limit:~
寄与-:contribute:~
保つ:keepする:~
知覚-:perceive:~
異議:objection:~
指示書き:instruction:~
復帰-:revert:~
commit::::コミット
派生-:derive:~
整理-:clean up:~
併合-:merge:~
規定-:dictate:~
実用:usable:~
無用:useless:~
黙示-:imply:~
後継版:successor:~
多彩:rich:~
不便:awkward:~
明白:obvious:~
基礎:basis:~
	-:analogous
厳格:rigorous:~
名詞:nouns:~
述語:predicate:~
協調-:coordinate:~
不可能:impossible:~
	起こり得る／:possible
実施上の:practicalな:~
特異性:oddity:~
不用意:accidental:~
不作為:inadvertent:~
見越して:anticipateして:~
	見越して:in anticipation of
難しく:hardに:~
昇格-:upgrade:~
寛容:forgiving:~
	寛容でない:unforgiving
利用有無:usage:~
拡げら:expandさ:~
critical:
能動的:active::~::アクティブ
性質:quality:~
本物の:realな:~
明確さ:clarity:~
限定-:confine:~
真似る:resembleする:~
内来的:inherent:~
係わる:pertainする:~
新機軸:innovation:~
	新機軸:innovate
完璧:perfect:~
理論:theory:~
	理論~的に:theoretically
説明書き:explainer:~
強勢-:emphasize:~

	●仕様（他
	RECOMMENDing
	適合しない:non-conforming
	判別し得る基本的なもの:basic distinguisher
	将来に定義され得る:potential
	~~追加:extra
	定義されていない:undefined
	きちんと定義され:well-defined
	認識できない:unrecognized
	specification
	から派生した:-derived
	にもなり得る:potentially
	可能性:-
	まとめる:condense
	担う:serve
	取り消す:cancels out
	外され:left out
	定め:define
	密接な統合:close integration
	対象に:takes
	対象に:apply
	対象になるもの:to be about
	対象に，:against
	:aware of
	推定-:infer
	機能する:function
	用意:-
	略記:-
	示す:illustrate
	策定:
	課され:impose
	-:observe
	-:carrying
	know:
	known:
	記され:noted
	-:denote
	倣い:In keeping with:
	疑わしい:suspect
	に加えて:as well as
	made:
	make:
	say:
	散らばって:scattered throughout
	満たす:satisfy
	求まれ:authors 〜 want
	選ぶ:choose
	書かれ:written
	書いて:written
	書き直した:rewrote
	素描-:sketched out
	されないようにする:prevent
	〜とされる:is said to
	特能~一式:featureset
	構文解析-法:Parsing Quirks
	互換性:-compat
	一緒くたに:conflated 〜 sharing 〜 for both
	関連しない:irrelevance
	理由~付け:reasoning
	属する:’s own
	各 事例ごとに:case-by-case basis
	-:ISSUE
	~risk下:at-risk
	旧い:older
	書く:write
	およそ:likely
	~~規則
	〜に基づいて／に従って:with respect to
	〜に基づいて:in terms of
	〜を問わず:regardless of
	〜を問わず:without regard to
	いずれにせよ:regardless,
	問わず:or not
	すべての場合に対応する:catch all cases
	と:versus
	やり方／適用:method
	より高~levelな:higher-level
	一対多:one-to-many
	一定期間が経過:some amount of time
	ある量の時間:some amount of time
	一方で:meanwhile
	両立し得ない:mutually exclusive
	中核を成し:core component
	依然として／まだ:still
	処理規則
	別形へ投影した:alternate projection
	利用
	同一視
	~~地位
	場合
	~~安定的:robust
	年月に渡り:years
	新機能:new
	旧:older
	最低限:at minimum／:at least
	現時点:
	生来的:in nature
	用途:-
	かなりの力:considerable power
	簡潔:compact
	総称:
	自体:
	表現力:-
	語:term
	見誤り易い:somewhat difficult to tell apart at a quick glance
	~~特別な追加~情報:extra information
	／実:true
	 〜も:optionally
	例示:show
	-:conceivably
	-:Conversely,
	足る:sufficient
	不足:not sufficient
	better:
	-:although
	-:beyond
	need
	seems
	choice
	further
	how
	like
	-:manner
	per:
	please:
	-:pretty much
	rather:
	〜？:suggestions:
	ので:therefore
	〜一方:whereas
	-:address
	沿わない:fails to match
	今度は／今や／:now
	仮のもの:TBD
	早期の:early
	今日:today
	長きにわたり:have long had
	あまりに多い:too many
	~web~page:webpage
	今はなき:since dropped
	させるがままに:letting
	名残:leftover
	過ち:mistake
	現時点:at this point
	~~影響の一つ: one aspect of
	まったくもって:severely
	~~気付く:realize
	-:people
	~~条項:terms
	見込みを高める:more likely to be
	まっとうな:right-thinking
	~~残念なものと~~見下され:met with shaming and derision
	~~無為にする:take down
	見込まれ:likely
	逆に:conversely
	出発点:starting point
	別法として:Alternately,
	-:overall
	始めから:start
	区別:distinction
	助け:helpful
	し易く:help
	`BCP47$r:BCP 47
	`BCP47$r:BCP 47 [BCP47]
	`FULLSCREEN$r:Fullscreen
	`picture-in-picture$r:Picture-in-Picture
	能力がある:capable of
	今の所は:for now
	覚え書き:reminder
	本当に:really
	“真の”:true
	外した（~~元に戻した）:revert
	例えば:exemplified by
	例として〜挙げられる:exemplified by the presence of
	-:specifics
	無効~化:invalidate
	無効~化:invaliding
	文脈に応じた:contextual
	引き継ぐ:pass
	大雑把に言えば:roughly speaking
	~~経験則:rule of thumb
	〜以外に関しては:except for the existence of
	-:indeed
	-:(which are otherwise intentionally easy to not think about)
	~~考えていない:is not aware of
	有用さ:usefulness
	~~採用:took
	ついて来る:come with
	に関して:regard
	~~分野:space
	もちろん:of course
	含めること:inclusion
	ようになる:letting
	自前で:on their own
	に注意:notably

	●未分類
WebVTT:
論理:logic::~
獲得-:acquire:~
失った:loseした:~
連結-:concatenate:~
解放-:release:~
増大-:increase:~
描かれ:drawされ:~
描く:drawする:~
吸収-:absorb:~
切詰める:clampする:切り詰める
演算子:operator:~
繰返し:繰り返し
	繰返し:Repeated occurrences
存在p:presence:存在
変種:variant:~
schema::::スキーマ
on::::オン
等価性:equivalence:~
字幕:subtitle:~
縞模様:zebra-stripe:~
式:expression:~
	-:quotation
実効:effective:~
左横書き:left-to-right:~
切替えた:switchした:切り替えた
候補:candidate:~
部位:portion:~

	green
	red
	混成:mixtures
	alterable
	comparing
	置かれ:place
	-:sorted in
	類の:sort of
	突き合わせて検査-:cross-check
	参照:reference, referencing, see
	指す:refer
	と称される:refer
	参照元:referring
	~~見出し:heading／title／headline
	始まる:begin
	始まる:starting
	属する:belong-
	在る:lies／-
	分け隔てた:split out
	切り離した:untangle
	収まら:fit within
	検索:look for
	揃:align
	形／成し／form:form
	成す:constituent
	constitutes
	戻す:return
	数える／数に入れる:count
	現れる:appear
	終わる:end
	指している／:pointing
	指す／~~指定する:designate
	~~付随する:attach され
	最も先祖の要素:traversing parent links from element until an element without a parent is encountered
	内にある何かを表す:lies in
	consisting
	consists
	doing
	having
	hits
	happen
	using
	put
	include
	move:
	process:
	take
	含んでいる:finds itself in
	同時に:simultaneously

	Safari
	Chrome
	WebKit
	高い:higher
	より遠い:later
	2 次元: 2D
	greater
	key
	long
	none
	pre
	time
	フランス語:French
	ベルギー・フランス語／ドイツ語:Belgian French／German
	一定周期:cycle
	主導:-primary
	交替的に float ~~配置:alternate the position of floated
	交替的／順繰りに／別形:alternate
	付与
	位置／:position
	処理
	可能
	地点:point
	大きさ:size
	期間:period
	-:positive
	-:negative
	点線:dashed
	種類:kind／
	空でない:non-zero length
	空でない:one or more
	等しければ:tied
	節:section／chapter
	~text~node:standalone text
	行:line
	部品:component／
	~~限定
	現れない:not 〜 present
	無い:not present
	“無い”:“null”
	空~値:Empty-Value
	~DOM内の要素:real element
	^en:complete
	^en:fast
	^en:scope-constrained
	^en:scope-filtered
	^en:scope-contained
	RFC
	同じ~~長さになる:ends up being just as long
	量:amount
	絶対~化:absolutize
	までの間:between the time
	一連の:set
	among:
	すべての方々:everyone
	whichever:
	ほとんど:mostly／almost
	別物:-
	別物:distinct
	他種:
	ある部分:some extent
	ある／一部の:certain
	上述:
	上記参照
	else
	単に／同じ／:just
	一つでも:just one
	:things
	whatever:
	whenever:
	whose
	least
	once
	他のもの:others
	もの:ones
	over
	prev
	先に:prior to
	sometimes
	just 〜 the one 1 個だけ
	~~単独:alone
	〜でも〜でもない:neither 〜nor
	〜に対して:against
	複数の／挙げる:several
	どこでも／どこにでも:anywhere
	何か／-:anything
	もしあれば:if any
	在るか否か:presence of
	一度
	一方
	一種
	一連
	一部
	一部分
	両方:both
	以上
	以下
	以前
	以外
	任意の:any
	様々な:variety
	主な:main
	個数
	最も深い:deepest
	次の:next
	自身
	全:full
	全体:whole
	全体を通して:throughout
	別の／-:another
	終端-:end
	末尾の:rightmost
	前の:previous
	以前に:previously
	前後:around
	前後:before/after, and/or after
	唯一:sole
	多数
	少数:a few
	複数:several
	複数個の値:multiple-value
	最大
	最短:shortest
	場所
	先頭:start
	先頭の:leading
	先頭の~colon:initial punctuation

	後続-:follow
	先行-:precede
	後続／先行するすべての:(possibly indirect) next／previous
	直下:underneath
	直前に在る:immediately preceded by
	直後に在る:immediately followed by
	最も近い:closest
	respectively
	異ならせる:differentiate
	異なるように:differently
	同時に:simultaneous
	当該
	有無
	有無が~~未設定:neither 〜 nor
	より低く:lower
	より大きい:larger
	広く:largely
	場合によっては:possibly
	超え:overflow
	部分／一部:part
	逆向き:in reverse
	二重:double
	外して:without
	最終的な:ultimate
	最終的には:eventually
	残りの部分:the rest
	それ自身のみからなる:the rest
	後続して:subsequently
	すべて〜されるかされないか:at all
	1 個だけを伴う:single-
	0 個以上の〜後続する:optionally followed by additional
	ときには:sometimes
	時点から:starting
	時点から〜ない:stop
	対応する:respective
	隣接して:adjacent
	.footnote^css:footnote
	以前に~previously
	前項:the previous
	追った:follow
	~styleを違える:styling differently
	-:piece
	`iframe^e:iframe

●●original_id_map

AnB-notation:
	grammar:formal-syntax

●●mdn_urls

active-pseudo:CSS/:active
any-link-pseudo:CSS/:any-link
blank-pseudo:CSS/:blank
checked-pseudo:CSS/:checked
current-pseudo:CSS/:current
default-pseudo:CSS/:default
defined-pseudo:CSS/:defined
dir-pseudo:CSS/:dir
disabled-pseudo:CSS/:disabled
empty-pseudo:CSS/:empty
enabled-pseudo:CSS/:enabled
first-child-pseudo:CSS/:first-child
first-of-type-pseudo:CSS/:first-of-type
focus-visible-pseudo:CSS/:focus-visible
focus-within-pseudo:CSS/:focus-within
focus-pseudo:CSS/:focus
future-pseudo:CSS/:future
has-pseudo:CSS/:has
hover-pseudo:CSS/:hover
in-range-pseudo:CSS/:in-range
indeterminate-pseudo:CSS/:indeterminate
invalid-pseudo:CSS/:invalid
lang-pseudo:CSS/:lang
last-child-pseudo:CSS/:last-child
last-of-type-pseudo:CSS/:last-of-type
link-pseudo:CSS/:link
local-link-pseudo:CSS/:local-link
nth-child-pseudo:CSS/:nth-child
nth-col-pseudo:CSS/:nth-col
nth-last-child-pseudo:CSS/:nth-last-child
nth-last-col-pseudo:CSS/:nth-last-col
nth-last-of-type-pseudo:CSS/:nth-last-of-type
nth-of-type-pseudo:CSS/:nth-of-type
only-child-pseudo:CSS/:only-child
only-of-type-pseudo:CSS/:only-of-type
optional-pseudo:CSS/:optional
out-of-range-pseudo:CSS/:out-of-range
past-pseudo:CSS/:past
placeholder-shown-pseudo:CSS/:placeholder-shown
read-only-pseudo:CSS/:read-only
read-write-pseudo:CSS/:read-write
required-pseudo:CSS/:required
root-pseudo:CSS/:root
scope-pseudo:CSS/:scope
target-within-pseudo:CSS/:target-within
target-pseudo:CSS/:target
user-invalid-pseudo:CSS/:user-invalid
user-valid-pseudo:CSS/:user-valid
valid-pseudo:CSS/:valid
visited-pseudo:CSS/:visited
where-pseudo:CSS/:where
selectordef-paused:CSS/:paused
selectordef-playing:CSS/:playing
	selectordef-seeking:
	selectordef-buffering:
	selectordef-stalled:
	selectordef-muted:
	selectordef-volume-locked:
negation-pseudo:CSS/:not
matches-pseudo:CSS/:is
selectordef-matches:CSS/:is
selectordef-current:CSS/:current
selectordef-modal:CSS/:modal
selectordef-fullscreen:CSS/:fullscreen
selectordef-picture-in-picture:CSS/:picture-in-picture
selectordef-autofill:CSS/:autofill


selector:CSS/CSS_Selectors
pseudo-class:CSS/Pseudo-classes
pseudo-element:CSS/Pseudo-elements
specificity:CSS/Specificity
class-selector:CSS/Class_selectors
type-selector:CSS/Type_selectors
attribute-selector:CSS/Attribute_selectors
universal-selector:CSS/Universal_selectors
id-selector:CSS/ID_selectors
column-combinator:CSS/Column_combinator
descendant-combinator:CSS/Descendant_combinator
child-combinator:CSS/Child_combinator
next-sibling-combinator:CSS/Adjacent_sibling_combinator
subsequent-sibling-combinator:CSS/General_sibling_combinator
selector-list:CSS/Selector_list

●●link_map


at.namespace:~CSSNS#at-ruledef-namespace

	●ps

ps.active:#active-pseudo
ps.any-link:#any-link-pseudo
ps.autofill:#selectordef-autofill
ps.blank:#blank-pseudo
ps.checked:#checked-pseudo
ps.current:#current-pseudo
ps.default:#default-pseudo
ps.defined:#defined-pseudo
ps.dir():#dir-pseudo
ps.disabled:#disabled-pseudo
ps.empty:#empty-pseudo
ps.enabled:#enabled-pseudo
ps.first-child:#first-child-pseudo
ps.first-of-type:#first-of-type-pseudo
ps.focus-visible:#focus-visible-pseudo
ps.focus-within:#focus-within-pseudo
ps.focus:#focus-pseudo
ps.fullscreen:#selectordef-fullscreen
ps.future:#future-pseudo
ps.has():#has-pseudo
ps.hover:#hover-pseudo
ps.in-range:#in-range-pseudo
ps.indeterminate:#indeterminate-pseudo
ps.invalid:#invalid-pseudo
ps.lang():#lang-pseudo
	ps.lang():~CSS22#selectordef-lang
ps.last-child:#last-child-pseudo
ps.last-of-type:#last-of-type-pseudo
ps.link:#link-pseudo
ps.local-link:#local-link-pseudo
ps.modal:#selectordef-modal
ps.nth-child():#nth-child-pseudo
ps.nth-col():#nth-col-pseudo
ps.nth-last-child():#nth-last-child-pseudo
ps.nth-last-col():#nth-last-col-pseudo
ps.nth-last-of-type():#nth-last-of-type-pseudo
ps.nth-of-type():#nth-of-type-pseudo
ps.only-child:#only-child-pseudo
ps.only-of-type:#only-of-type-pseudo
ps.open:#selectordef-open
ps.optional:#optional-pseudo
ps.out-of-range:#out-of-range-pseudo
ps.past:#past-pseudo
ps.picture-in-picture:#selectordef-picture-in-picture
ps.placeholder-shown:#placeholder-shown-pseudo
ps.popover-open:#selectordef-popover-open
ps.read-only:#read-only-pseudo
ps.read-write:#read-write-pseudo
ps.required:#required-pseudo
ps.root:#root-pseudo
ps.scope:#scope-pseudo
ps.target-within:#target-within-pseudo
ps.target:#target-pseudo
ps.user-invalid:#user-invalid-pseudo
ps.user-valid:#user-valid-pseudo
ps.valid:#valid-pseudo
ps.visited:#visited-pseudo
ps.where():#where-pseudo

ps.paused:#selectordef-paused
ps.playing:#selectordef-playing
ps.seeking:#selectordef-seeking
ps.buffering:#selectordef-buffering
ps.stalled:#selectordef-stalled
ps.muted:#selectordef-muted
ps.volume-locked:#selectordef-volume-locked

ps.not():#negation-pseudo
ps.is():#matches-pseudo
ps.matches():#selectordef-matches
ps.current():#selectordef-current

ps.host:~CSSSCOPING#selectordef-host
ps.host-context():~CSSSCOPING#selectordef-host-context

ps.dir(ltr):~HTMLselectors#selector-ltr
ps.dir(rtl):~HTMLselectors#selector-rtl

css.&gt;:#selectordef-child
css.+:#selectordef-adjacent
css.~:#selectordef-sibling
css.||:#selectordef-column


	●§ps
	PS.empty:the-empty-pseudo
	PS.first-child:the-first-child-pseudo
	PS.first-of-type:the-first-of-type-pseudo
	PS.last-child:the-last-child-pseudo
	PS.last-of-type:the-last-of-type-pseudo
	PS.nth-child():the-nth-child-pseudo
	PS.nth-col():the-nth-col-pseudo
	PS.nth-last-child():the-nth-last-child-pseudo
	PS.nth-last-col():the-nth-last-col-pseudo
	PS.nth-last-of-type():the-nth-last-of-type-pseudo
	PS.nth-of-type():the-nth-of-type-pseudo
	PS.only-child:the-only-child-pseudo
	PS.only-of-type:the-only-of-type-pseudo
	PS.root:the-root-pseudo


	●pe
pe.before:~CSSPSEUDO#selectordef-before
pe.marker:~CSSPSEUDO#selectordef-marker
pe.after:~CSSPSEUDO#selectordef-after
pe.first-line:~CSSPSEUDO#selectordef-first-line
pe.first-letter:~CSSPSEUDO#selectordef-first-letter

pe.slotted():~CSSSCOPING#selectordef-slotted
pe.shadow:~TR/css-scoping-1/#selectordef-shadow
pe.content:~TR/css-scoping-1/#selectordef-content
pe.column:~CSSMCOL#selectordef-column

	●p
p.display:~CSSDISP#propdef-display
p.visibility:~CSSDISP#propdef-visibility
p.direction:~CSSWM#propdef-direction

	●t
t.any-value:~CSSSYN#typedef-any-value
t.attr-matcher:#typedef-attr-matcher
t.attr-modifier:#typedef-attr-modifier
t.attribute-selector:#typedef-attribute-selector
t.class-selector:#typedef-class-selector
t.combinator:#typedef-combinator
	combinator:#combinator0
t.complex-selector:#typedef-complex-selector
t.complex-selector-unit:#typedef-complex-selector-unit
t.complex-selector-list:#typedef-complex-selector-list
t.complex-real-selector:#typedef-complex-real-selector
t.complex-real-selector-list:#typedef-complex-real-selector-list
t.compound-selector-list:#typedef-compound-selector-list
t.compound-selector:#typedef-compound-selector
t.forgiving-selector-list:#typedef-forgiving-selector-list

t.delim-token:~CSSSYN#typedef-delim-token
t.function-token:~CSSSYN#typedef-function-token
t.hash-token:~CSSSYN#typedef-hash-token
t.id-selector:#typedef-id-selector
t.ident-token:~CSSSYN#typedef-ident-token
t.ident:~CSSVAL#typedef-ident
t.legacy-pseudo-element-selector:#typedef-legacy-pseudo-element-selector
t.ns-prefix:#typedef-ns-prefix
t.pseudo-class-selector:#typedef-pseudo-class-selector
t.pseudo-compound-selector:#typedef-pseudo-compound-selector
t.pseudo-element-selector:#typedef-pseudo-element-selector
t.relative-real-selector:#typedef-relative-real-selector
t.relative-real-selector-list:#typedef-relative-real-selector-list
t.relative-selector:#typedef-relative-selector
t.relative-selector-list:#typedef-relative-selector-list
t.selector-list:#typedef-selector-list
t.simple-selector-list:#typedef-simple-selector-list
t.simple-selector:#typedef-simple-selector
t.subclass-selector:#typedef-subclass-selector
t.string-token:~CSSSYN#typedef-string-token
t.string:~CSSVAL#string-value
t.type-selector:#typedef-type-selector
t.whitespace-token:~CSSSYN#typedef-whitespace-token
t.wq-name:#typedef-wq-name

	|:~CSSVAL#comb-one
	#:~CSSVAL#mult-comma
	*:~CSSVAL#mult-zero-plus
	+:~CSSVAL#mult-one-plus
	?:~CSSVAL#mult-opt

	ident:~CSSVAL#typedef-ident
	string:~CSSVAL#string-value

v.list-item:~CSSDISP#valdef-display-list-item

	●e/a
e.html:~HEmetadata#the-html-element
e.link:~HEmetadata#the-link-element
e.meta:~HEmetadata#the-meta-element
e.a:~HEtextlevel#the-a-element
e.dialog:~HEinteractive#the-dialog-element
e.em:~HEtextlevel#the-em-element
e.q:~HEtextlevel#the-q-element
e.span:~HEtextlevel#the-span-element

e.div:~HEgrouping#the-div-element
e.dl:~HEgrouping#the-dl-element
e.dt:~HEgrouping#the-dt-element
e.li:~HEgrouping#the-li-element
e.menu:~HEgrouping#the-menu-element
e.ol:~HEgrouping#the-ol-element
e.p:~HEgrouping#the-p-element
e.pre:~HEgrouping#the-pre-element

e.body:~HEsections#the-body-element
e.section:~HEsections#the-section-element
	e.h1:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
	e.h2:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

e.area:~HEimages#the-area-element
e.img:~HEimages#the-img-element
e.object:~HEembed#the-object-element

e.audio:~HEmedia#the-audio-element
e.video:~HEmedia#the-video-element

	~HEcanvas.html#canvas

e.input:~HEinput#the-input-element
e.form:~HEforms#the-form-element
e.button:~HEforms#the-button-element
e.label:~HEforms#the-label-element
e.option:~HEforms#the-option-element
e.select:~HEforms#the-select-element
e.textarea:~HEfomrs#the-textarea-element
e.audio:~HEmedia#audio
e.video:~HEmedia#video
e.details:~HEinteractive#the-details-element

e.td:~HEtables#the-td-element
e.tr:~HEtables#the-tr-element

e.math:https://w3c.github.io/mathml-core/#dfn-math

a.href:~HTMLlinks#attr-hyperlink-href
a.popover:~HTMLpopover#attr-popover

	a.value
	a.contenteditable
	a.placeholder:~HEinput#attr-input-placeholder
	a.placeholder:~HEforms#attr-textarea-placeholder
	a.selected
	a.checked

	●IDL
I.Element:~DOM4#interface-element
I.Text:~DOM4#interface-text
I.Comment:~DOM4#interface-comment
I.ProcessingInstruction:~DOM4#interface-processinginstruction
I.EntityReference:~DOM4#entityreference
I.DocumentFragment:~DOM4#documentfragment
	文書片
I.DocumentType:~DOM4#interface-documenttype
I.Document:~DOM4#interface-document
	~HTMLdom#document
c.querySelector():~DOM4#dom-parentnode-queryselector
c.getComputedStyle():~CSSOM1#dom-window-getcomputedstyle

	●用語／§

~ID選択子:#id-selector
~ID選択子§:#id-selectors
名前空間:#type-nmsp
型:#type-selectors
詳細度:#specificity
選択子:#selector
選択子の概観§:#overview
選択子の構文と構造§:#syntax
選択子の詳細度の計算-法§:#specificity-rules
合致して:#match
合致-:#match

疑似要素:#pseudo-element
関数形~疑似要素:#functional-pseudo-element
疑似要素§:#pseudo-elements
疑似要素の種別§:#pseudo-element-types
出自の要素:#originating-element
下位-疑似要素:#sub-pseudo-element
下位-疑似要素§:#sub-pseudo-elements
出自の疑似要素:#originating-pseudo-element
最終的な出自の要素:#ultimate-originating-element
未知な -webkit- 疑似要素:#unknown--webkit--pseudo-elements
	`has()^ps の中で許容される:#has-allowed-pseudo-element

同胞~群:#_siblings

単純-選択子:#simple
複合-選択子:#compound
疑似-複合-選択子:#pseudo-compound
複階-選択子:#complex
成す~list:#list-of-simple-selectors
選択子~list:#selector-list
選択子~list§:#grouping
部分照合 属性~選択子§:#attribute-substrings
全称~選択子:#universal-selector
全称~選択子§:#the-universal-selector
定義-済み 疑似類§:#the-defined-pseudo
~ID選択子§:#id-selectors
~class選択子§:#class-html
~class選択子:#class-selector
元素的な選択子§:#elemental-selectors
元素的な選択子における名前空間§:#type-nmsp
型~選択子:#type-selector
型（~tag名）選択子§:#type-selectors
属性~存在p／属性~値~選択子§:#attribute-representation
属性~選択子:#attribute-selector
属性~選択子§:#attribute-selectors
属性~選択子と名前空間§:#attrnmsp
格子構造~選択子§:#table-pseudos
相対~選択子:#relative-selector
相対~選択子§:#relative
~anchor要素:#relative-selector-anchor-elements
sel.旧来の別名:#legacy-selector-alias
無効な選択子:#invalid-selector
無効な選択子と~errorの取扱い§:#invalid
視野ng根:#scoping-root
視野~付き選択子:#scoped-selector
視野~付き:#scoped-selector
視野~付き選択子§:#scoping
~subject:#selector-subject
結合子:#selector-combinator
結合子§:#combinators
~col結合子:#column-combinator
~col結合子§:#the-column-combinator
後続~同胞~結合子:#subsequent-sibling-combinator
後続~同胞~結合子§:#general-sibling-combinators
子孫~結合子:#descendant-combinator
子孫~結合子§:#descendant-combinators
子~結合子:#child-combinator
子~結合子§:#child-combinators
直後~同胞~結合子:#next-sibling-combinator
直後~同胞~結合子§:#adjacent-sibling-combinators

疑似類:#pseudo-class
疑似類§:#pseudo-classes
関数形~疑似類:#functional-pseudo-classes
利用者~動作~疑似類:#user-action-pseudo-class
論理-組合n疑似類:#logical-combination-pseudo-classes
言語~範囲:#language-range

論理的な組合n§:#logical-combination
論理和 疑似類§:#matches
否定 疑似類§:#negation
詳細度~調整 疑似類§:#something
関係上の 疑似類§:#relational

自然言語に関する疑似類§:#linguistic-pseudos
方向性 疑似類§:#the-dir-pseudo
自然言語 疑似類§:#the-lang-pseudo
所在 疑似類§:#location
~hyperlink 疑似類§:#the-any-link-pseudo
~link履歴 疑似類§:#link
局所~link 疑似類§:#the-local-link-pseudo
~target 疑似類§:#the-target-pseudo
~target容器 疑似類§:#the-target-within-pseudo
視野ng根 疑似類§:#the-scope-pseudo

利用者~動作 疑似類§:#useraction-pseudos
~pointer~hover 疑似類§:#the-hover-pseudo
作動化 疑似類§:#the-active-pseudo
入力~focus 疑似類§:#the-focus-pseudo
~focus指示-先 疑似類§:#the-focus-visible-pseudo
~focus容器 疑似類§:#the-focus-within-pseudo

時系列 疑似類§:#time-pseudos
現在-要素 疑似類§:#the-current-pseudo
過去-要素 疑似類§:#the-past-pseudo
未来-要素 疑似類§:#the-future-pseudo

資源~状態 疑似類§:#resource-pseudos
~media再生-状態 疑似類§:#video-state
~media読込ng状態 疑似類§:#media-loading-state
音響~状態 疑似類§:#sound-state

要素~表示~状態 疑似類§:#display-state-pseudos
開閉~状態 疑似類§:#open-state
~popover状態 疑似類§:#popover-open-state
~modal状態 疑似類§:#modal-state
~fullscreen呈示~状態 疑似類§:#fullscreen-state
~picture-in-picture呈示~状態 疑似類§:#pip-state

入力 疑似類§:#input-pseudos
操作可否 疑似類§:#enableddisabled
変異能 疑似類§:#rw-pseudos
仮入力例示 疑似類§:#placeholder
自動的~入力 疑似類§:#autofill
既定の~option 疑似類§:#the-default-pseudo
選択-済み~option 疑似類§:#checked
不定な値 疑似類§:#indeterminate
空な値 疑似類§:#blank
妥当性 疑似類§:#validity-pseudos
範囲 疑似類§:#range-pseudos
必須随意 疑似類§:#opt-pseudos
利用者~対話 疑似類§:#user-pseudos

~tree構造上の疑似類§:#structural-pseudos
子付番 疑似類§:#child-index
有型 子付番 疑似類§:#typed-child-index

構造と各種用語§:#structure
構造上の疑似類:#structural-pseudo-classes

~host言語:#host-language
文書~言語:#document-language
無特能:#featureless
~data~model§:#data-model
~module間の相互作用§:#placement

入力~controlの状態§:#input-states
入力~値の検査-法§:#ui-validity
入力~値の状態§:#input-value-states
~API~hook§:#api-hooks
	~DTD内で与えられる属性の既定~値§:#def-values
名前空間§:#namespaces

~focusを指示-:#indicate-focus

選択子として構文解析する:#parse-a-selector
選択子~listとして寛容に構文解析する:#parse-as-a-forgiving-selector-list
選択子の構文解析-法§:#parse-selector
相対~選択子として構文解析する:#parse-a-relative-selector
相対~選択子の構文解析-法§:#parse-relative-selector
~treeに対し選択子を照合する§:#match-against-tree
~treeに対し選択子を照合する:#match-a-selector-against-a-tree
要素に対し選択子を照合する§:#match-against-element
要素に対し選択子を照合する:#match-a-selector-against-an-element
要素に対し複階-選択子を照合する:#match-a-complex-selector-against-an-element
疑似要素に対し選択子を照合する§:#match-against-pseudo-element
疑似要素に対し選択子を照合する:#match-a-selector-against-a-pseudo-element

変更点§:#changes

空白:#whitespace
宣言-:#nsdecl
宣言-済み:#nsdecl
属性~値の文字大小比較§:#attribute-case
文字大小比較§:#case-sensitive

序論§:#context
文法:#grammar
文法§:#grammar
表記規約§:#conventions
適合性§:#conformance
	特能:#feature
	~DTD内で与えられる属性の既定~値:#def-values

~level 2:#biblio-css21
~level 3:#biblio-select
	~level 2 まで:CSS Level 1 and CSS Level 2
	~level 3:~TR/selectors-3/

	●用語（CSS
~CSS値~定義~構文:~CSSVAL#value-defs

平坦~tree:~CSSSCOPING#flat-tree

内容~言語:~CSSTEXT#content-language
文書~空白~文字:~CSSTEXT#white-space
既定の名前空間:~CSSNS#default-namespace
~CSS有修飾~名:~CSSNS#css-qualified-name
名前空間~接頭辞:~CSSNS#namespace-prefix
~NULL名前空間:~CSSNS#null-namespace
~escape法:~CSSSYN#escape-codepoint
	~escape法~規則:~CSS22/syndata.html#characters
~CSS識別子:~CSSVAL#css-css-identifier
文法に則って構文解析-:~CSSSYN#css-parse-something-according-to-a-css-grammar
~commaで分離された~listを~CSS文法に則って構文解析する:~CSSSYN#css-parse-a-comma-separated-list-according-to-a-css-grammar

~treeに留まる疑似要素:~CSSPSEUDO#tree-abiding

~box:~CSSDISP#box
~box~tree:~CSSDISP#box-tree
表示~型:~CSSDISP#display-type
根~要素:~CSSDISP#root-element

~cascade法:~CASCADE#cascading
宣言の詳細度:~CASCADE#cascade-specificity

	●用語（他
~ASCII大小無視:~INFRA#ascii-case-insensitive
一致-:~INFRA#string-is
	集合:~INFRA#ordered-set
~tuple:~INFRA#tuple

st.Text:~HEinput#text-(type=text)-state-and-search-state-(type=search)
st.Checkbox:~HEinput#checkbox-state-(type=checkbox)
st.Submit:~HEinput#submit-button-state-(type=submit)

下位tree:~DOM4#concept-tree
根:~DOM4#concept-tree-root
親:~DOM4#concept-tree-parent
	~DOM4#dom-node-parentnode
子孫:~DOM4#concept-tree-descendant
~tree順序:~DOM4#concept-tree-order
~shadowも含めた~tree順序:~DOM4#concept-shadow-including-tree-order
~shadow~tree:~DOM4#concept-shadow-tree
~shadow~host:~DOM4#element-shadow-host
過去互換~mode:~DOM4#concept-document-quirks
文書:~DOM4#concept-document
文書片:~DOM4#_concept-documentfragment
文書~要素:~DOM4#document-element
広義-同胞:~DOM4#concept-tree-inclusive-sibling
定義-済み:~DOM4#concept-element-defined
doc.生成元:~DOM4#concept-document-origin

~custom要素:~HEcustom#custom-element

~URL:~URL1#concept-url
url.素片:~URL1#concept-url-fragment
url.生成元:~URL1#concept-url-origin
同等な~URL:~URL1#concept-url-equals

生成元:~ORIGIN#concept-origin
同一-生成元:~ORIGIN#same-origin
~site:~ORIGIN#site
同じ~site:~ORIGIN#same-site
~siteを得する:~ORIGIN#obtain-a-site

~navigable:~HTMLds#navigable
~top-level辿可能:~HTMLds#top-level-traversable
~node~navigable:~HTMLds#node-navigable
nav.~top-level辿可能:~HTMLds#nav-top
nav.作動中な文書:~HTMLds#nav-document

~focus可能な区画:~HTMLinteraction#focusable-area
~popover可視性~状態:~HTMLpopover#popover-visibility-state

~media~data:~HEmedia#media-data
~media要素の停滞-制限時間:~HEmedia#stall-timeout
実効~media音量:~HEmedia#effective-media-volume

●●ref_key_map
CSS3NAMESPACE:CSSNAMESPACES3
CSSSTYLEATTR:CSSSTYLEATTR1
CSS3SYN:CSSSYNTAX3
CSS3UI:CSSUI3

●●ref_normative

[BCP47]
    A. Phillips, Ed.; M. Davis, Ed.. ＜Tags for Identifying Languages＞. September 2009. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-MULTICOL-2]
    Florian Rivoal; Rachel Andrew. ＜CSS Multi-column Layout Module Level 2＞. URL: https://drafts.csswg.org/css-multicol-2/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-SCOPING-1]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Scoping Module Level 1＞. URL: https://drafts.csswg.org/css-scoping/
[CSS-TEXT-4]
    Elika Etemad; et al. ＜CSS Text Module Level 4＞. URL: https://drafts.csswg.org/css-text-4/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-3]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 3＞. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS21]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3NAMESPACE]
    Elika Etemad. ＜CSS Namespaces Module Level 3＞. URL: https://drafts.csswg.org/css-namespaces/
[CSS3SYN]
    Tab Atkins Jr.; Simon Sapin. ＜CSS Syntax Module Level 3＞. URL: https://drafts.csswg.org/css-syntax/
[DOM]
    Anne van Kesteren. ＜DOM Standard＞. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
    Anne van Kesteren; Domenic Denicola. ＜Infra Standard＞. Living Standard. URL: https://infra.spec.whatwg.org/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[RFC4647]
    A. Phillips, Ed.; M. Davis, Ed.. ＜Matching of Language Tags＞. September 2006. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc4647
[SELECT]
    Tantek Çelik; et al. ＜Selectors Level 3＞. URL: https://drafts.csswg.org/selectors-3/
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/
[URL]
    Anne van Kesteren. ＜URL Standard＞. Living Standard. URL: https://url.spec.whatwg.org/

●●ref_informative

[CSS-COLOR-5]
    Chris Lilley; et al. ＜CSS Color Module Level 5＞. URL: https://drafts.csswg.org/css-color-5/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. URL: https://drafts.csswg.org/css-display/
[CSS3UI]
    Tantek Çelik; Florian Rivoal. ＜CSS Basic User Interface Module Level 3 (CSS3 UI)＞. URL: https://drafts.csswg.org/css-ui-3/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[CSSSTYLEATTR]
    Tantek Çelik; Elika Etemad. ＜CSS Style Attributes＞. URL: https://drafts.csswg.org/css-style-attr/
[FULLSCREEN]
    Philip Jägenstedt. ＜Fullscreen API Standard＞. Living Standard. URL: https://fullscreen.spec.whatwg.org/
[HTML5]
    Ian Hickson; et al. ＜HTML5＞. 27 March 2018. REC. URL: https://www.w3.org/TR/html5/
[ITS20]
    David Filip; et al. ＜Internationalization Tag Set (ITS) Version 2.0＞. 29 October 2013. REC. URL: https://www.w3.org/TR/its20/
[MATHML]
    Patrick D F Ion; Robert R Miner. ＜Mathematical Markup Language (MathML™) 1.01 Specification＞. 7 March 2023. REC. URL: https://www.w3.org/TR/REC-MathML/
[MATHML-CORE]
    David Carlisle; Frédéric Wang. ＜MathML Core＞. URL: https://w3c.github.io/mathml-core/
[PICTURE-IN-PICTURE]
    Francois Beaufort. ＜Picture-in-Picture＞. URL: https://w3c.github.io/picture-in-picture/
[QUIRKS]
    Simon Pieters. ＜Quirks Mode Standard＞. Living Standard. URL: https://quirks.spec.whatwg.org/
[SVG11]
    Erik Dahlström; et al. ＜Scalable Vector Graphics (SVG) 1.1 (Second Edition)＞. 16 August 2011. REC. URL: https://www.w3.org/TR/SVG11/
[XFORMS11]
    John Boyer. ＜XForms 1.1＞. 20 October 2009. REC. URL: https://www.w3.org/TR/xforms11/
[XML-NAMES]
    Tim Bray; et al. ＜Namespaces in XML 1.0 (Third Edition)＞. 8 December 2009. REC. URL: https://www.w3.org/TR/xml-names/
[XML10]
    Tim Bray; et al. ＜Extensible Markup Language (XML) 1.0 (Fifth Edition)＞. 26 November 2008. REC. URL: https://www.w3.org/TR/xml/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">Selectors Level 4</a>
を日本語に翻訳したものです。
公開：<time>2012-06-23</time> ）
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/selectors-4/
公表履歴
	https://www.w3.org/standards/history/selectors-4/

フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/selectors-4">CSSWG Issues Repository</a>

編集
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	<a href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (Google)
前任編集者
	<a href="http://www.tantek.com/" lang="tr">Tantek Çelik</a>
	Daniel Glazman
	Ian Hickson
	Peter Linss
	John Williams

Suggest an Edit for this Spec
	https://github.com/w3c/csswg-drafts/blob/main/selectors-4/Overview.bs
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/selectors-4

</script>

<!-- 結合子
cb-column:<code class="css">||</code>
cb-child:<code class="css">&gt;</code>
cb-adjacent:<code class="css">+</code>
cb-column:selectordef-column
cb-child:selectordef-child
cb-adjacent:selectordef-adjacent

-->

</head>

<body>

<header>
	<hgroup>
<h1>選択子 — Selectors Level 4</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>
	<section id="abstract">
◎要約

<p>
`選択子$とは、
文書~内の~nodeを選択するために利用できる いくつかの技術を成す一つであり，
~node~treeの中の要素たちと照合するための~patternである。
`選択子$は、
~HTMLや~XMLにおける利用に最適化されてきており，
処理能が~criticalな~code内でも実用になるよう設計されている。
~CSS（ `Cascading Style Sheets^en ）においては、
文書~内の要素に~style~propを束縛するために`選択子$が利用される点で，
その中核を成している。
~Selectors~level 4 は、
既存の選択子 `SELECT$r について述べることに加え，
~CSSや他の言語に必要になり得る新たな選択子を導入する。
◎
Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of CSS (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document. Selectors Level 4 describes the selectors that already exist in [SELECT], and further introduces new selectors for CSS and other languages that may need them.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、編集者草案の公な複製です…
【以下、この節の他の内容は，~SOTD-CSSに移譲。】
</p>

<p>
次に挙げる特能は、
`~risk下＠~CSScommon#at-risk$にあり，
勧告候補の期間に落とされるかもしれません。
◎
The following features are at-risk, and may be dropped during the CR period:
</p>
<ul>
	<li>
`~col結合子$
◎
the column combinator
</li>
	<li>
`~treeに留まる疑似要素$以外の`疑似要素$に適用される`利用者~動作~疑似類$
◎
user action pseudo-classes applying to non-tree-abiding pseudo-elements
</li>
	<li>
`blank$ps 疑似類
◎
the :blank pseudo-class
</li>
</ul>

	</section>

<main id="MAIN0">

	<section id="context">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
`選択子$とは、［
~tree構造~内の各~要素に対し，要素が選択子に合致するかどうか
］を~testする真偽-述語である。
◎
A selector is a boolean predicate that takes an element in a tree structure and tests whether the element matches the selector or not.
</p>

<p>
これらの式には多くの用途がある：
◎
These expressions may be used for many things:
</p>

<ul>
	<li>
`element.matches()＠~DOM4#dom-element-matches$c ~API【！関数】 `DOM$r などにおいて、
要素が何らかの判定基準に合致するかどうかを，直に~testする。
◎
directly on an element to test whether it matches some criteria, such as in the element.matches() function defined in [DOM]
</li>
	<li>
`document.querySelectorAll()＠~DOM4#dom-parentnode-queryselectorall$c ~API【！関数】 `DOM$r や~CSS~style規則の選択子などを通して、
要素~tree全体に適用して，判定基準に合致する要素たちが成す集合に絞込む。
◎
applied to an entire tree of elements to filter it into a set of elements that match the criteria, such as in the document.querySelectorAll() function defined in [DOM] or the selector of a CSS style rule.
</li>
	<li>
`HAML＠http://haml.info/$
や
`Emmet＠https://en.wikipedia.org/wiki/Emmet_(software)$
などのように “逆向き” に利用して、
所与の選択子に合致するような~markupを生成する。
◎
used "in reverse" to generate markup that would match a given selector, such as in HAML or Emmet.
</li>
</ul>

<p>
~Selectors~level 1, 2, 3 は、
順に
`CSS1＠~TR/REC-CSS1$cite 仕様,
`CSS21$r,
`SELECT$r
に定義される
— これらは、
選択子の機能性の下位集合を成すものとして定義される。
この~moduleは、
~Selectors~level 4 を定義する。
【~levelを伴わない “~Selectors” は、これら各~levelの仕様の総称を表す。】
◎
Selectors Levels 1, 2, and 3 are defined as the subsets of selector functionality defined in the CSS1, CSS2.1, and Selectors Level 3 specifications, respectively. This module defines Selectors Level 4.
</p>

		<section id="placement">
<h3 title="Module Interactions">1.1. ~module間の相互作用</h3>

<p>
この~moduleは、
`~level 2$, `~level 3$
にて~CSS用に定義された選択子の定義を置換し，その集合を拡張する。
◎
This module replaces the definitions of and extends the set of selectors defined for CSS in [SELECT] and [CSS21].
</p>

<p>
具現化~treeの中の抽象的な要素を定義する`疑似要素$選択子は、
この仕様の一部を成すものではない。
その汎用~構文は，ここで述べられるが、
それらの具現化~modelとの密接な統合, および~DOM~queryその他の関連しない用途などに因り，
他の~module【 `CSS-PSEUDO-4$r など】にて定義されることになる。
◎
Pseudo-element selectors, which define abstract elements in a rendering tree, are not part of this specification: their generic syntax is described here, but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries, they will be defined in other modules.
</p>
		</section>
		<section id="_conventions">
<h3>【この訳に特有な表記規約】</h3>

◎表記記号

		</section>
	</section>
	<section id="overview">
<h2 title="Selectors Overview">2. 選択子の概観</h2>

<p>
`この節は規範的ではなく，以下の各~節を要約するものに過ぎない。^em
◎
This section is non-normative, as it merely summarizes the following sections.
</p>

<p>
選択子は、
構造を表現する。
この構造は、
文書~treeの中でどの要素が選択子に合致するかを決定するための条件として
（例：~CSS規則における）, あるいは
その構造に対応する~HTMLや~XMLを成す素片の平坦な記述として，利用し得る。
◎
A selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
</p>

<p>
選択子の表現力は、
単純な要素~名から多彩な文脈に応じた表現までに渡る。
◎
Selectors may range from simple element names to rich contextual representations.
</p>

<p>
選択子の構文は，次の表tに要約される：
◎
The following table summarizes the Selector syntax:
</p>

<p class="trans-note">【
この表tにおいては、［
%E ／ %F
］は ある`複合-選択子$を表し， %T は ある`型~選択子$を表す。
“%E 要素” は %E に合致する要素を意味する（ “%F 要素”, “%T 要素” も同様）。
】【
“分類” の~~見出しは訳者による追加。
】【
この訳では、
原文の表tには まだ挙げられていない選択子（ "※" が付与されたもの）も含めている
（それらの記述は、この訳による補完である）。
】</p>

<table id="_overview_" class="grid-table">

<colgroup>
<col class="pattern">
<col class="meaning">
<col class="section">
<col class="level">
</colgroup><thead>

<tr class="header1"><th colspan="4">分類
<tr><th>
~pattern
◎
Pattern
<th>
表現される`~subject$
◎
Represents
<th>
§
◎
Section
<th>
~level
◎
Level

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`元素的な選択子§

<!-- 
elemental-selectors
	type-selectors
	type-nmsp
	universal-selector
	defined
-->
<tr><td>`*^css
<td>
任意の要素
◎
any element
<td>`全称~選択子§
<td>2

<tr><td>`%T^css
<td>
任意の %T 要素
◎
an element of type E
<td>`型（~tag名）選択子§
<td>1

<tr><td>`%E:defined^css ※
<td>
“定義-済み” である %E 要素
<td>`定義-済み 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`論理的な組合n§
<!-- 
logical-combination
grouping
matches
is
negation
-->
<tr><td>`%E:not(%s1, %s2, ...)^css
<td>
`複合-選択子$ %s1, %s2, … のどれにも合致しない %E 要素
◎
an E element that does not match either compound selector s1 or compound selector s2
<td>`否定 疑似類§
<td>3/4

<tr><td>`%E:is(%s1, %s2, ...)^css
<td>
`複合-選択子$ %s1, %s2, … のどれかに合致する %E 要素
◎
an E element that matches compound selector s1 and/or compound selector s2
<td>`論理和 疑似類§
<td>4

<tr><td>`%E:where(%s1, %s2, ...)^css
<td>
`複合-選択子$ %s1, %s2, … のどれかに合致する %E 要素
— 加えて、
詳細度にも寄与しない
◎
an E element that matches compound selector s1 and/or compound selector s2 but contributes no specificity.

<td>`詳細度~調整 疑似類§
<td>4

<tr><td>`%E:has(%rs1, %rs2, ...)^css
<td>
`相対~選択子$ %rs1, %rs2, … のいずれかに対し［
`~anchor要素$として %E を与える下で評価したとき，合致する要素が存在する
］ような %E 要素
◎
an E element, if there exists an element that matches either of the relative selectors rs1 or rs2, when evaluated with E as the anchor elements
<td>`関係上の 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`属性~選択子§

<!-- 
attribute-representation
attribute-substrings
attribute-case
attrnmsp
def-values
class-html
id-selectors
-->
<tr><td>`%E.%warning^css
<td>
%warning ~class に属する %E 要素
（要素が属する~classがどう決定されるかは、
文書~言語が指定する）。
◎
an E element belonging to the class warning (the document language specifies how class is determined).
<td>`~class選択子§
<td>1

<tr><td>`%E#%myid^css
<td>
~IDが %myid に等しい %E 要素
◎
an E element with ID equal to myid.
<td>`~ID選択子§
<td>1

<tr><td>`%E[%foo]^css
<td>
%foo 属性を有する %E 要素
◎
an E element with a foo attribute
<td>`属性~存在p／属性~値~選択子§
<td>2

<tr><td>`%E[%foo="%bar"]^css
<td>
%foo 属性~値が %bar に等しい %E 要素
◎
an E element whose foo attribute value is exactly equal to bar
<td>`属性~存在p／属性~値~選択子§
<td>2

<tr><td>`%E[%foo="%bar" i]^css
<td>
%foo 属性~値が`~ASCII大小無視$で %bar に等しい %E 要素
◎
an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar
<td>`属性~値の文字大小比較§
<td>4

<tr><td>`%E[%foo="%bar" s]^css
<td>
%foo 属性~値が %bar に`一致-$する %E 要素
◎
an E element whose foo attribute value is identical to bar
<td>`属性~値の文字大小比較§
<td>4

<tr><td>`%E[%foo~="%bar"]^css
<td>
%foo 属性~値を`空白$で分離した~listを成す ある項が %bar に等しい %E 要素
◎
an E element whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to bar
<td>`属性~存在p／属性~値~選択子§
<td>2

<tr><td><code class="css">%E[%foo^="%bar"]</code>
<td>
%foo 属性~値が文字列 %bar から始まる %E 要素
◎
an E element whose foo attribute value begins exactly with the string bar
<td>`部分照合 属性~選択子§
<td>3

<tr><td><code class="css">%E[%foo$="%bar"]</code>
<td>
%foo 属性~値が文字列 %bar で終わる %E 要素
◎
an E element whose foo attribute value ends exactly with the string bar
<td>`部分照合 属性~選択子§
<td>3

<tr><td>`%E[%foo*="%bar"]^css
<td>
%foo 属性~値が %bar を部分文字列として包含する %E 要素
◎
an E element whose foo attribute value contains the substring bar
<td>`部分照合 属性~選択子§
<td>3

<tr><td>`%E[%foo|="%en"]^css
<td>
%foo 属性~値を~hyphenで分離した~listを成す最初の項が %en に等しい %E 要素
◎
an E element whose foo attribute value is a hyphen-separated list of values beginning with en
<td>`属性~存在p／属性~値~選択子§
<td>2

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`自然言語に関する疑似類§

<!-- 
the-dir-pseudo
the-lang-pseudo
 -->

<tr><td>`%E:dir(ltr)^css
<td>
方向性が左横書きの %E 要素
（方向性がどう決定されるかは、
文書~言語が指定する）
◎
an element of type E with left-to-right directionality (the document language specifies how directionality is determined)
<td>`方向性 疑似類§
<td>4

<tr><td>`%E:lang(zh, "*-hant")^css
<td>
言語~tagが［
標準中国語（そのどの方言／書記体系も含む）, あるいは繁体字で書かれたもの
］として付与された下にある %E 要素
◎
an element of type E tagged as being either in Chinese (any dialect or writing system) or otherwise written with traditional Chinese characters
<td>`自然言語 疑似類§
<td>2/4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`所在 疑似類§
（以下における “~link元” とは、
~hyperlinkの~source~anchorを意味する）

<!-- 
the-any-link-pseudo
link
the-target-pseudo
the-target-within-pseudo
the-scope-pseudo
 -->
<tr><td>`%E:any-link^css
<td>
~link元である %E 要素
◎
an E element being the source anchor of a hyperlink
<td>`~hyperlink 疑似類§
<td>4

<tr><td>`%E:link^css
<td>
~targetが未訪問な~link元である %E 要素
◎
an E element being the source anchor of a hyperlink of which the target is not yet visited
<td>`~link履歴 疑似類§
<td>1

<tr><td>`%E:visited^css
<td>
~targetが訪問-済みな~link元である %E 要素
◎
an E element being the source anchor of a hyperlink of which the target is already visited
<td>`~link履歴 疑似類§
<td>1

<tr><td>`%E:local-link^css
<td>
現在の~URLを~targetにしている~link元である %E 要素
◎
an E element being the source anchor of a hyperlink targeting the current URL
<td>`局所~link 疑似類§
<td>4

<tr><td>`%E:target^css
<td>
現在の~URLにおいて~targetにされている %E 要素
◎
an E element being the target of the current URL
<td>`~target 疑似類§
<td>3

<tr><td>`%E:target-within^css
<td>
現在の~URLにおいて~targetにされているか, それを包含している %E 要素
◎
an E element that is the target of the current URL or contains an element that does.
<td>`~target容器 疑似類§
<td>4

<tr><td>`%E:scope^css
<td>
`視野ng根$でもある %E 要素
◎
an E element being a scoping root
<td>`視野ng根 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`時系列 疑似類§

<!-- 
the-current-pseudo
the-past-pseudo
the-future-pseudo
-->

<tr><td>`%E:current^css
<td>
時系列再生の下で現在~呈示された %E 要素
◎
an E element that is currently presented in a time-dimensional canvas
<td>`現在-要素 疑似類§
<td>4

<tr><td>`%E:current(%S)^css
<td>
最も深い `current$ps 要素であって, 選択子 %S に合致する %E 要素。
◎
an E element that is the deepest :current element that matches selector s
<td>`現在-要素 疑似類§
<td>4

<tr><td>`%E:past^css
<td>
時系列再生の下で過去に現れた %E 要素
◎
an E element that is in the past in a time-dimensional canvas
<td>`過去-要素 疑似類§
<td>4

<tr><td>`%E:future^css
<td>
時系列再生の下で未来に現れる %E 要素
◎
an E element that is in the future in a time-dimensional canvas
<td>`未来-要素 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`利用者~動作 疑似類§

<!-- 
the-hover-pseudo
the-active-pseudo
the-focus-pseudo
-->

<tr><td>`%E:active^css
<td>
作動化された %E 要素
◎
an E element that is in an activated state
<td>`作動化 疑似類§
<td>1

<tr><td>`%E:hover^css
<td>
自身または その子孫を~cursorが指している %E 要素
◎
an E element that is under the cursor, or that has a descendant under the cursor
<td>`~pointer~hover 疑似類§
<td>2

<tr><td>`%E:focus^css
<td>
利用者~入力の~focusを得ている %E 要素
◎
an E element that has user input focus
<td>`入力~focus 疑似類§
<td>2

<tr><td>`%E:focus-within^css
<td>
利用者~入力の~focusを得ているか, それを包含している %E 要素
◎
an E element that has user input focus or contains an element that has input focus.
<td>`~focus容器 疑似類§
<td>4

<tr><td>`%E:focus-visible^css
<td>
利用者~入力の~focusを得ている %E 要素のうち，~UAが［
その要素~用に~focus環~その他の指示子を描くべきである
］と決定した要素
◎
an E element that has user input focus, and the UA has determined that a focus ring or other indicator should be drawn for that element
<td>`~focus指示-先 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`資源~状態 疑似類§
<tr><td>`%E:playing^css ※／
`%E:paused^css ※／
`%E:seeking^css ※
<td>
~media要素のうち、
順に，［
再生している／
静止している／
~seekしている
］状態にある %E 要素
<td>`~media再生-状態 疑似類§

<td>4
<tr><td>`%E:buffering^css ※／ `%E:stalled^css ※
<td>
~media要素のうち、
順に，［
~buffer中にあり，再生を再開できない／
~dataを受信するのに失敗したため，再生し続けられない
］状態にある %E 要素
<td>`~media読込ng状態 疑似類§
<td>4

<tr><td>`%E:muted^css ※／ `%E:volume-locked^css ※
<td>
~media要素のうち、
順に，［
消音された／
~program的に変更しても音量は変化しない
］ %E 要素
<td>`音響~状態 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`要素~表示~状態 疑似類§

<tr><td>`%E:open^css ※
<td>
［
“開な”, “閉な”
］両~状態をとり得る要素のうち，現在は “開な” 状態にある %E 要素。
<td>`開閉~状態 疑似類§
<td>4

<tr><td>`%E:popover^css ※
<td>
［
“~popoverを示している”, “~popoverを隠している”
］両~状態をとり得る要素のうち，現在は “~popoverを示している” 状態にある %E 要素。

<td>`~popover状態 疑似類§
<td>4

<tr><td>`%E:modal^css ※
<td>
すべてのヤリトリを排他的に受け付けている %E 要素

<td>`~modal状態 疑似類§
<td>4

<tr><td>`%E:fullscreen^css ※
<td>
~fullscreen~modeで呈示されている %E 要素
<td>`~fullscreen呈示~状態 疑似類§
<td>4

<tr><td>`%E:picture-in-picture^css ※
<td>
~picture-in-picture~modeで呈示されている %E 要素

<td>`~picture-in-picture呈示~状態 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`入力 疑似類§
（ “UI” は “利用者~interface” の略語）
<!-- 
input-states
enableddisabled
rw-pseudos
placeholder
the-default-pseudo
input-value-states
checked
indeterminate
ui-validity
validity-pseudos
range-pseudos
opt-pseudos
user-pseudos
 -->

<tr><td>`%E:enabled^css ／ `%E:disabled^css
<td>
~UI要素のうち、順に，［
可能化-, 不能化-
］されている %E 要素
◎
a user interface element E that is enabled or disabled, respectively
<td>`操作可否 疑似類§
<td>3

<tr><td>`%E:read-only^css ／ `%E:read-write^css
<td>
~UI要素のうち、順に，利用者が内容を［
改めれる, 改めれない
］ %E 要素
◎
a user interface element E that is user alterable, or not
<td>`変異能 疑似類§
<td>3-UI/4

<tr><td>`%E:placeholder-shown^css
<td>
入力~controlのうち、
現在~仮入力~textを示している %E 要素
◎
an input control currently showing placeholder text
<td>`仮入力例示 疑似類§
<td>3-UI/4

<tr><td>`%E:autofill^css ※
<td>
入力~controlのうち、
~UAにより自動的に埋められていて，
後続して利用者により改められてない %E 要素
<td>`自動的~入力 疑似類§
<td>4

<tr><td>`%E:default^css
<td>
~UI要素のうち、
一連の選択肢の中で既定の選択肢にされている %E 要素
◎
a user interface element E that is the default item in a group of related choices
<td>`既定の~option 疑似類§
<td>3-UI/4

<tr><td>`%E:checked^css
<td>
~UI要素のうち、
~checkまたは選択されている %E 要素（~radio~buttonや~checkbox用）
◎
a user interface element E that is checked/selected (for instance a radio-button or checkbox)
<td>`選択-済み~option 疑似類§
<td>3

<tr><td>`%E:indeterminate^css
<td>
~UI要素のうち、
不定な（~checkの有無が~~未設定な）状態にある %E 要素
◎
a user interface element E that is in an indeterminate state (neither checked nor unchecked)
<td>`不定な値 疑似類§
<td>4

<tr><td>`%E:valid^css ／ `%E:invalid^css
<td>
~UI要素のうち、
順に，入力~値が［
妥当である, 妥当でない
］ %E 要素
◎
a user-input element E that meets, or doesn’t, its data validity semantics
<td>`妥当性 疑似類§
<td>3-UI/4

<tr><td>`%E:in-range^css ／ `%E:out-of-range^css
<td>
利用者~入力~要素のうち、
順に，入力~値が［
範囲~内, 範囲~外
］にある %E 要素
◎
a user-input element E whose value is in-range/out-of-range
<td>`範囲 疑似類§
<td>3-UI/4

<tr><td>`%E:required^css ／ `%E:optional^css
<td>
利用者~入力~要素のうち、
順に，入力が［
必須である, 必須でない
］ %E 要素
◎
a user-input element E that requires/does not require input
<td>`必須随意 疑似類§
<td>3-UI/4

<tr><td>`%E:blank^css
<td>
利用者~入力~要素のうち、
値が空欄である（空／欠落である） %E 要素
◎
a user-input element E whose value is blank (empty/missing)
<td>`空な値 疑似類§
<td>4

<tr><td>`%E:user-invalid^css
<td>
利用者~入力~要素のうち、
【利用者から】不正な値が入力された %E 要素
（妥当でない／範囲~外である／必須にもかかわらず未入力にされた）
◎
a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required)
<td>`利用者~対話 疑似類§
<td>3-UI/4

<tr><td>`%E:user-valid^css ※
<td>
利用者~入力~要素のうち、
利用者から正しい値が入力された %E 要素
◎
<td>`利用者~対話 疑似類§
<td>4

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`~tree構造上の疑似類§
（以下における “同胞”, “同胞~群” は、
概ね，同じ親を共有する要素（~text~など他種の~nodeは除外される）,
それらが成す`~tree順序$による一連の要素を意味する
— 正確な定義は、
`同胞~群$を見よ）。

<!-- 
anb
anb-syntax
anb-grammar
child-index
 -->
<tr><td>`%E:root^css
<td>
文書の根である %E 要素
◎
an E element, root of the document
<td>`root$PS
<td>3

<tr><td>`%E:empty^css
<td>
空白~以外に子が無い %E 要素（要素, ~textどちらの子も）
◎
an E element that has no children (neither elements nor text) except perhaps white space
<td>`empty$PS
<td>3

<tr>
<td>`%E:nth-child(%n [of %S]?)^css
<td>
同胞~群の中で %S に合致する要素のうち %n 個目のものであって， %E 要素でもあるもの
◎
an E element, the n-th child of its parent matching S
<td>`nth-child()$PS
<td>3/4

<tr><td>`%E:nth-last-child(%n [of %S]?)^css
<td>
同胞~群の中で %S に合致する要素のうち 最後から %n 個目のものであって， %E 要素でもあるもの
◎
an E element, the n-th child of its parent matching S, counting from the last one
<td>`nth-last-child()$PS
<td>3/4

<tr><td>`%E:first-child^css
<td>
同胞~群の中で最初の要素であって， %E 要素でもあるもの
◎
an E element, first child of its parent
<td>`first-child$PS
<td>2

<tr><td>`%E:last-child^css
<td>
同胞~群の中で最後の要素であって， %E 要素でもあるもの
◎
an E element, last child of its parent
<td>`last-child$PS
<td>3

<tr><td>`%E:only-child^css
<td>
自身の他に同胞は無い， %E 要素
◎
an E element, only child of its parent
<td>`only-child$PS
<td>3

<tr><td>`%T:nth-of-type(%n)^css
<td>
同胞~群の中の %T 要素のうち， %n 個目のもの
【 %T が一般の`複合-選択子$であった場合の挙動は、定義を見よ（以下同様）】
◎
an E element, the n-th sibling of its type
<td>`nth-of-type()$PS
<td>3

<tr><td>`%T:nth-last-of-type(%n)^css
<td>
同胞~群の中の %T 要素のうち，最後から %n 個目のもの
◎
an E element, the n-th sibling of its type, counting from the last one
<td>`nth-last-of-type()$PS
<td>3

<tr><td>`%T:first-of-type^css
<td>
同胞~群の中の %T 要素のうち，最初のもの
◎
an E element, first sibling of its type
<td>`first-of-type$PS
<td>3

<tr><td>`%T:last-of-type^css
<td>
同胞~群の中の %T 要素のうち，最後のもの
◎
an E element, last sibling of its type
<td>`last-of-type$PS
<td>3

<tr><td>`%T:only-of-type^css
<td>
自身の他に同胞である %T 要素は無い， %T 要素
◎
an E element, only sibling of its type
<td>`only-of-type$PS
<td>3

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`結合子§（
語 “同胞~群” は上記参照
）

<tr><td>`%E %F^css
<td>
%E 要素の子孫である %F 要素
◎
an F element descendant of an E element
<td>`子孫~結合子§
<td>1

<tr><td>`%E &gt; %F^css
<td>
%E 要素の子である %F 要素
◎
an F element child of an E element
<td>`子~結合子§
<td>2

<tr><td>`%E + %F^css
<td>
同胞~群の中で， %E 要素の直後に在る %F 要素
◎
an F element immediately preceded by an E element
<td>`直後~同胞~結合子§
<td>2

<tr><td>`%E ~ %F^css
<td>
同胞~群の中で， %E 要素に後続している %F 要素
◎
an F element preceded by an E element
<td>`後続~同胞~結合子§
<td>3

<tbody><tr class="header1"><th colspan="4" scope="rowgroup">
`格子構造~選択子§

<tr><td>`%F || %E^css
<td>
格子／~table内の， %F 要素で表現される~colに属する~cellを表現する %E 要素
◎
an E element that represents a cell in a grid/table belonging to a column represented by an element F
<td>`~col結合子§
<td>4

<tr><td>`%E:nth-col(%n)^css
<td>
格子／~table内の %n 個目の~colに属する~cellを表現する %E 要素
◎
an E element that represents a cell belonging to the nth column in a grid/table
<td>`nth-col()$PS<td>4

<tr><td>`%E:nth-last-col(%n)^css
<td>
格子／~table内の最後から %n 個目の~colに属する~cellを表現する %E 要素
◎
an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one
<td>`nth-last-col()$PS<td>4
</table>

<p class="note">注記：
一部の ~level 4 選択子（上の表tで "3-UI" と記されているもの）は
`CSS3UI$r
にて導入されたものである。
◎
Note: Some Level 4 selectors (noted above as "3-UI") were introduced in [CSS3UI].
</p>

	</section>
	<section id="syntax">
<h2 title="Selector Syntax and Structure">3. 選択子の構文と構造</h2>

		<section id="structure">
<h3 title="Structure and Terminology">3.1. 構造と各種用語</h3>

<p>
`選択子@
（ `selector^en ）は、
~tree構造における特定0の要素（たち）が成す~patternを表現する。
`選択子$は、［
`単純-選択子$,
`複合-選択子$【／`疑似-複合-選択子$】,
`複階-選択子$,
`選択子~list$
］の総称である†。
`選択子$の
`~subject@
（ `subject of a selector^en ）とは、
当の`選択子$の対象になるものとして定義される要素たちである
— すなわち、
`選択子$に
`合致して@
いる任意の要素である。
◎
A selector represents a particular pattern of element(s) in a tree structure. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. The subject of a selector is any element that selector is defined to be about; that is, any element matching that selector.
</p>

<p class="trans-note">【†
この仕様の中では、
`複階-選択子$を表すことが多い。
この種の`同一視＠#_note1_$は、
“一定範囲の要素を選択する” という機能上の観点からは同等に扱えるイミで 理に適う面もある一方で，
定義が解り難くなる面もあるので、
この訳では必要に応じて注釈を加えている。
】</p>

<dl class="def-list">
	<dt>
`単純-選択子@
（ `simple selector^en ）
</dt>
	<dd>
合致する要素が満たすべき単独の条件を表す。
それは、
次に挙げるいずれかである
（`文法$においては `simple-selector$t により表現される）
⇒＃
`型~選択子$,
`全称~選択子$,
`属性~選択子$,
`~class選択子$,
`~ID選択子$,
`疑似類$
◎
A simple selector is a single condition on an element. A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector. (It is represented by &lt;simple-selector&gt; in the selectors grammar.)＼
</dd>
	<dd>
所与の要素 %E は、
次を満たすならば，`単純-選択子$ %S に`合致して$いるとされる
⇒
%S は、
この仕様に定義されるとおり, かつ`文書~言語$に則って，
%E を正確aに述べている。
◎
A given element is said to match a simple selector when that simple selector, as defined in this specification and in accordance with the document language, accurately describes the element.
</dd>

	<dt>
`複合-選択子@
（ `compound selector^en ）
</dt>
	<dd>
`結合子$で分離されていない`単純-選択子$たちが成す連列であり
（`文法$においては `compound-selector$t により表現される）、
単独の要素が同時に満たす条件たちが成す集合を表現する。
この連列が［
`型~選択子$／`全称~選択子$
］を包含する場合、
それは先頭に来なければナラナイ†。
◎
A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element. If it contains a type selector or universal selector, that selector must come first in the sequence. Only one type selector or universal selector is allowed in the sequence. (A compound selector is represented by &lt;compound-selector&gt; in the selectors grammar.)＼
</dd>
	<dd class="trans-note">【†
この制約は、
構文解析の都合による。
下層~modelの目的においては，そのようにする必然性は無い。
】</dd>
	<dd>
所与の要素 %E は、
次を満たすならば，`複合-選択子$ %S に`合致して$いるとされる
⇒
%E は、
%S を成すどの`単純-選択子$にも`合致して$いる
◎
A given element is said to match a compound selector when it matches all simple selectors in the compound selector.
</dd>
	<dd class="note">注記：
空白は`子孫~結合子$を表現するので、
`複合-選択子$内の`単純-選択子$たちの合間には，空白は許容されない。
◎
Note: As whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors in a compound selector.
</dd>

	<dt>
`疑似-複合-選択子@
（ `pseudo-compound selector^en ）
</dt>
	<dd>
<p>
`疑似要素$選択子 %P に
0 個以上の`疑似類$選択子が`結合子$を挟まずに後続するもの
（`文法$においては `pseudo-compound-selector$t により表現される）。
%P には，省略可能な［
`複合-選択子$／`疑似-複合-選択子$
］ %Q が`結合子$を挟まずに先行する。
`疑似要素$は、
~AND↓ を満たすとき，`疑似-複合-選択子$に`合致して$いるとされる：
◎
A pseudo-compound selector is a pseudo-element selector, optionally followed by additional pseudo-class selectors, and optionally preceded by a compound selector or another pseudo-compound selector, without any combinators. (A pseudo-compound selector is represented by &lt;pseudo-compound-selector&gt; in the selectors grammar.) A pseudo-element matches a pseudo-compound selector when＼
</p>
		<ul>
			<li>
%P の名前に対応する`疑似要素$である
◎
it has the specified pseudo-element name,＼
</li>
			<li>
後続する各 `疑似類$により表現される追加的な条件に合致している
◎
matches the additional conditions represented by any pseudo-classes,＼
</li>
			<li>
その`出自の要素$は、
%Q に`合致-$している
— %Q が省略された場合、
%Q は`全称~選択子$であると見做される
（例えば，
`.foo ::before^css は、
`.foo *::before^css と等価であり，
`.foo::before^css とは別物になる）。
◎
and has an originating element represented by the adjacent preceding selector. If there is no adjacent preceding selector, the universal selector is assumed. (For example, .foo ::before is equivalent to .foo *::before, and distinct from .foo::before.)
</li>
		</ul>
	</dd>
	<dd class="example">
例えば，
`.foo::before:hover^css においては、［
`.foo^css は`複合-選択子$,
`::before:hover^css は`疑似-複合-選択子$
］を成す。
一方で，
`.foo::before::marker^css においては、［
`before$pe, `marker$pe
］は別々な`疑似-複合-選択子$を成す。
【この場合、 `marker^pe は`下位-疑似要素$を成すので，その`出自の要素$は `before^pe で表現されることになる。】
◎
For example, in .foo::before:hover, the .foo is a compound selector, while the ::before:hover is a pseudo-compound selector. However, in .foo::before::marker, ::before and ::marker are separate pseudo-compound selectors.
</dd>
	<dd class="note">注記：
`疑似-複合-選択子$は、
`複合-選択子$<strong>ではない</strong>ので，
`複合-選択子$しか期待しない所には利用できない。
`疑似-複合-選択子$は、［
その`出自の要素$との関係性を表出する，ある`結合子$
］を伴っているかのように動作する
— `子~結合子$が親~要素との関係性を表出するのと同じく。
◎
Note: A pseudo-compound selector is not a compound selector, and can’t be used in places that expect a compound selector only. Pseudo-compound selectors act as if they carry a combinator with themselves, expressing their relationship with their originating element, just as the &gt; combinator expresses a relationship with a parent element.
</dd>

	<dt>
`結合子@
（ `combinator^en ）
</dt>
	<dd>
両側に在る`複合-選択子$で表現される 2 つの要素の関係性についての条件を表す。
◎
A combinator is a condition of relationship between two elements represented by the compound selectors on either side.＼
</dd>
	<dd>
~Selectors~level 4 の結合子には次に挙げる 4 種がある
⇒＃
`子孫~結合子$（`空白$）,
`子~結合子$（ “大なり記号”, `003E^U ）,
`直後~同胞~結合子$（“正符号”, `002B^U ）,
`後続~同胞~結合子$（ “~tilde”, `007E^U ）
◎
Combinators in Selectors Level 4 include: the descendant combinator (white space), the child combinator (U+003E, &gt;), the next-sibling combinator (U+002B, +), and the subsequent-sibling combinator (U+007E, ~).＼
</dd>
	<dd>
所与の 2 つの要素【順序も有意】は、
次を満たすならば`結合子$に`合致して$いるとされる
⇒
`結合子$が表す関係性についての条件に`合致して$いる。
◎
Two given elements are said to match a combinator when the condition of relationship between these elements is true.
</dd>

	<dt>
`複階-選択子@
（ `complex selector^en ）
</dt>
	<dd>
<p>
`結合子$で分離された “単位” たち
（および，それら “単位” の合間にある`結合子$たち）
が成す空でない連列
（`文法$においては `complex-selector$t により表現される）。
それは、
一連の要素が［
それらの`結合子$で述べられる特定0の関係性
］を同時に満たす条件たちが成す集合を表現する。
</p>

<p>
`複階-選択子$を成す各 “単位”
（`文法$においては `complex-selector-unit$t により表現される）は、
順に［
0 〜 1 個の`複合-選択子$,
0 個以上の`疑似-複合-選択子$
］からなる，空でない連列である。
</p>
◎
A complex selector is a sequence of one or more compound selectors and/or pseudo-compound selectors, with compound selectors separated by combinators. It represents a set of simultaneous conditions on a set of elements in the particular relationships described by its combinators. (Complex selectors are represented by &lt;complex-selector&gt; in the selectors grammar.)＼
</dd>
	<dd>
<p>
所与の［
要素／`疑似要素$
］ %E は、
~AND↓ を満たす要素~群 %L が在るとき，
`複階-選択子$ %S に`合致して$いるとされる：
</p>
		<ul>
			<li>
%L を成す要素の個数 ~EQ %S を成す単位の個数
— 以下、 %N と記す。
</li>
			<li>
<p>
どの %n ~IN { 1 〜 %N } に対しても、［
%L を成す %n 個目の要素 %要素,
%S を成す %n 個目の単位 %単位
］は ~AND↓ を満たす：
</p>
				<ul>
					<li>
%要素 は、
%単位 を成す`複合-選択子$
— 無い場合は`全称~選択子$が在るものと見做す —
に`合致して$いる
</li>
					<li>
%単位 を成す どの`疑似-複合-選択子$ %P に対しても、
次を満たす`疑似要素$ %疑似要素 がある
⇒
［
%疑似要素 は %P に`合致して$いる
］~AND［
%要素 ~EQ %疑似要素 の`最終的な出自の要素$
］
</li>
				</ul>
			</li>
			<li>
どの %n ~IN { 1 〜 %N ~MINUS 1 } に対しても、
次が満たされる
⇒
%L を成す［
%n , %n ~PLUS 1
］個目の要素は，
%S を成す［
%n , %n ~PLUS 1
］個目の単位の合間に在る結合子による関係性を満たす
</li>
			<li>
%E は %S を成す最後の単位の最後の［
`複合-選択子$／`疑似-複合-選択子$
］に`合致して$いる
</li>
		</ul>
◎
A given element or pseudo-element is said to match a complex selector when it matches the final compound/pseudo-compound selector in the sequence, and every preceding unit of the sequence also matches an element or pseudo-element, with the correct relationship between consecutive units as expressed by the combinators separating them (or, for pseudo-compound selectors, the correct originating element relationship).
</dd>
	<dd class="trans-note">【
原文は行間情報が多いので、
この訳では，`文法§に基づいて記述を補完している。
】</dd>
</dl>

<p class="trans-note" id="_note1_">【
これらの用語は，上述の様に階層的な関係で区別されるものであるが、
（構文上は／機能的には）同時に：
`単純-選択子$は， 1 個のそれからなる`複合-選択子$と見なすこともでき、
`複合-選択子$は， 1 個のそれからなる`複階-選択子$と見なすこともでき、
`複階-選択子$は， 1 個のそれからなる`選択子~list$と見なすこともできる。
その結果， 1 個の`単純-選択子$は，`選択子~list$と見なせることになり、
`複合-選択子$の一部分もまた `複合-選択子$と見なすことができ，
`複階-選択子$の一部分もまた `複階-選択子$と見なすこともできる,
等々になる。
したがって，例えば、
複階-選択子に適用される~algoや要件は，
型~選択子などの単純-選択子や複合-選択子, 等々にも（それを複階-選択子と見なす下で）適用されることになる。
】</p>

<div class="example">
<p>
例えば，次に挙げる選択子に合致するものは：
◎
For example,＼
</p>
<ul>
	<li>
`.foo.bar^css
⇒
`foo^v, `bar^v 両~classを伴う要素。
◎
.foo.bar matches an element with both "foo" and "bar" classes.
</li>
	<li>
`.ancestor &gt; .foo.bar^css
⇒
`.foo.bar^css に合致する要素のうち，
その親~要素は `ancestor^v ~classを伴うもの
（ `子~結合子$により指示されるとおり）。
◎
.ancestor &gt; .foo.bar matches a subset of those elements: only those whose parent element (as indicated by the &gt; combinator) has the "ancestor" class.
</li>
	<li>
`.foo.bar::before^css
⇒
`before$pe 疑似要素のうち，
その`出自の要素$は `.foo.bar^css に合致するもの。
◎
.foo.bar::before matches a ::before pseudo-element, whose originating element matches .foo.bar.
</li>
</ul>
</div>

<p>
［
`単純-選択子$／`複合-選択子$／`複階-選択子$
］たちが
`成す~list@
とは、
これらいずれかの選択子たちが成す~commaで分離された~listである
【~listが空な場合（空白のみ）、`無効な選択子$になる】
。
［
どの選択子か未指定な場合／周囲の注釈文から明らかな場合
］は、
単に
`選択子~list@
とも称される。
既定では、
`複階-選択子$たちが`成す~list$の意味になる。
（追加的な情報は、
`選択子~list§を見よ。
正式な構文については、
`文法§における各種 `*-selector-list^t 生成規則を見よ。）
◎
A list of simple/compound/complex selectors is a comma-separated list of simple, compound, or complex selectors. This is also called just a selector list when the type is either unimportant or specified in the surrounding prose; if the type is important and unspecified, it defaults to meaning a list of complex selectors. (See § 4.1 Selector Lists for additional information on selector lists and the various &lt;*-selector-list&gt; productions in the grammar for their formal syntax.)＼
</p>

<p>
所与の要素 %E は、
次を満たすならば，`選択子~list$ %S に`合致して$いるとされる
⇒
%E は %S 内の 1 個以上の`選択子$に`合致して$いる
◎
A given element is said to match a selector list when it matches any (at least one) of the selectors in that selector list.
</p>

		</section>
		<section id="data-model">
<h3 title="Data Model">3.2. ~data~model</h3>

<p>
選択子は、
~DOM~tree `DOM$r などの要素~treeに対し評価される。
この仕様においては、
“文書~tree”, あるいは “~source文書” とも称される。
◎
Selectors are evaluated against an element tree such as the DOM. [DOM] Within this specification, this may be referred to as the "document tree" or "source document".
</p>

<p>
各~要素は、
次に挙げる 5 種の側面
【これらは、以下では “特能（ `feature^en ）” と総称される】
に基いて選択される
— いずれも文字列として照合される：
◎
Each element may have any of the following five aspects, which can be selected against, all of which are matched as strings:
</p>

<ul>
	<li>
要素の型（~tag名とも呼ばれる）
◎
The element’s type (also known as its tag name).
</li>
	<li>
要素が属する名前空間
◎
The element’s namespace.
</li>
	<li>
~ID
◎
An ID.
</li>
	<li>
要素が属する~class（有名~group）たち
◎
Classes (named groups) to which it belongs.
</li>
	<li>
( 名前, 値 ) が成す~pairである属性
◎
Attributes, which are name-value pairs.
</li>
</ul>

<p>
選択子の多くは、
`文書~言語@
（ `document language^en ）
の意味論
（すなわち，文書~treeの［
言語と意味論
］）
に依存したり，
`~host言語@
（ `host language^en ）
（すなわち，選択子~構文を利用している言語）の意味論に依存する。
例えば， `lang()$ps 選択子は、
要素に自然言語が どう結付けられるかを定義する際に，`文書~言語$（例： ~HTML）に依存する。
少し異なる例として， `first-line$pe 疑似要素は、［
それが何を表現するか, その何かに対し何を行えるか
］を定義する際に，`~host言語$（例： ~CSS）に依存する。
◎
Many of the selectors depend on the semantics of the document language (i.e. the language and semantics of the document tree) and/or the semantics of the host language (i.e. the language that is using selectors syntax). For example, the :lang() selector depends on the document language (e.g. HTML) to define how an element is associated with a language. As a slightly different example, the ::first-line pseudo-element depends on the host language (e.g. CSS) to define what a ::first-line pseudo-element represents and what it can do.
</p>

			<section id="featureless-elements">
<h4 title="Featureless Elements">3.2.1. 無特能な要素</h4>

<p>
個々の要素には、
上に挙げた特能のうち一部を欠くものもある中で，
`無特能@
（ `featureless^en ）なもの
— どの特能も備えないもの —
もある。
`無特能$な要素に合致することが許容される選択子
— 以下， “許容されるもの” と略記する —
は、
次に挙げるものに限られる：
◎
While individual elements may lack any of the above features, some elements are featureless. A featureless element does not match any selector at all, except:
</p>

<ul>
	<li>
`単純-選択子$のうち，許容されるものとして明示的に定義されたもの。
◎
simple selectors it is explicitly defined to match
</li>
	<li>
次を満たす`複合-選択子$
⇒
それが包含する`単純-選択子$は、
いずれも，許容されるものである。
◎
compound selectors, if all contained simple selectors are allowed to match it
</li>
	<li>
次を満たす`複階-選択子$
⇒
`~subject$を~targetにする【すなわち，末尾の】`複合-選択子$は、
許容されるものである。
◎
complex selectors, if the compound selector targeting the subject is allowed to match it
</li>
	<li>
次を満たす`選択子~list$
⇒
当の~list内に，許容されるものが在る。
◎
selector lists, if at least one selector in the list is allowed to match it
</li>
	<li>
次を満たす`論理-組合n疑似類$
⇒
その選択子~引数は、
許容されるものである。
◎
logical combination pseudo-classes, if their argument selector is allowed to match it
</li>
	<li>
次を満たす `has()$ps 疑似類
⇒
次を満たす`複合-選択子$の一部を成している
⇒
それを成す`他の^em`単純-選択子$として，許容されるものが在る。
◎
the :has() pseudo-class, if and only if the compound selector it’s part of contains at least one other simple selector that’s allowed to match it.
</li>
</ul>

<p>
ある選択子が`既定の名前空間$ `CSS3NAMESPACE$r 【！`CSS-NAMESPACES-3$r 】以外に関しては，ある`無特能$な要素に合致する場合
（無特能な要素は、
他が定義されない限り，どの名前空間にも属さないので）、
既定の名前空間は，合致することを防止しない。
◎
If a selector would otherwise match a featureless element, except for the existence of the default namespace [CSS-NAMESPACES-3] (because featureless elements do not have a namespace unless otherwise defined), the default namespace does not prevent the match.
</p>

<div class="example">
<p>
例えば，`~shadow~tree$における`~shadow~host$は、
`無特能$である
— `host$ps, `host-context()$ps
（および、 `:is(:host, :root)^css など，それらを含んでいる組合n）
を除く，`どの^em`疑似類$にも合致しない。
◎
For example, the shadow host in a shadow tree is featureless, and can’t be matched by any pseudo-class except for :host and :host-context() (or combinations including those, such as :is(:host, :root)). 
</p>

<p>
`:not(.foo:host)^css の様な`論理-組合n疑似類$は、
`~shadow~host$【！~host要素】には決して合致しない
（それが `foo^v ~classを有していない場合でも）
— `.foo:host^css には、
`無特能$な要素に合致することは許容されない`単純-選択子$（ `.foo^css ）が在るので。
◎
Logical combinations like :not(.foo:host) will never match the host element (even if it doesn’t have a "foo" class), because not all of the simple selectors in .foo:host are allowed to match the shadow host.
</p>

<p>
類似に， `:not(:host &gt; .foo)^css は、
`~shadow~host$には決して合致しない
（`~shadow~host$は自身の子孫ではないが／
それが `foo^v ~classを有していない場合でも）
— 当の複階-選択子~引数の~subject（ `.foo^css ）は、
`~shadow~host$に合致することは許容されないので。
【`not()^ps は否定を意味するが、それでも。】
◎
Similarly, :not(:host &gt; .foo) will never match the shadow host, even tho the shadow host is indeed *not* a descendant of itself and doesn’t have the "foo" class, because the subject of the complex selector argument (.foo) isn’t allowed to match the shadow host.
</p>
</div>

<div class="example">
<p>
不用意に選択することを避けるため、
一般に，`無特能$な要素には、［
それに合致することが許容される`単純-選択子$
］を明示的に利用しない限り，合致し得ない
【！(which are otherwise intentionally easy to not think about)】。
例えば，`全称~選択子$は、
`無特能$な要素には決して合致しない。
◎
In general, you can’t match a featureless element without explicitly using one of the simple selectors it’s allowed to match, to avoid accidentally selecting one of these elements (which are otherwise intentionally easy to not think about). For example, * will never match a featureless element.
</p>

<p>
`has()$ps 用の規則は、
上と類似に働く。
ある`~shadow~host$が `.foo^css に合致する子孫を包含する場合でも、
`:has(.foo)^css は，合致しないことになる
— それは、
それ自身のみからなる複合-選択子であり，
~shadow~hostに合致することが許容される`単純-選択子$は無いので。
~shadow~host【！~host要素】に合致させるためには、
`:host:has(.foo)^css と書く必要がある。
◎
The rule for :has(), above, works similarly. Even if a shadow host contains a .foo descendant, :has(.foo) will not match it, because the rest of the compound selector (empty) doesn’t contain a simple selector that can match the host. You have to write :host:has(.foo) in order to match the host element.
</p>
</div>

			</section>
		</section>
		<section id="scoping">
<h3 title="Scoped Selectors">3.3. 視野~付き選択子</h3>

<p>
~host~appは、
選択子の視野を［
文書の特定0の下位tree, あるいは文書の一片
］†に絞ることもある。
そのような選択子は，
`視野~付き選択子@
（ `scoped selector^en ）と呼ばれ、
この下位treeの根は
`視野ng根@
（ `scoping root^en ）と呼ばれる††。
◎
Some host applications may choose to scope selectors to a particular subtree or fragment of the document, The root of the scoping subtree is called the scoping root.
</p>

<p class="trans-note">【†
`文書$の下位treeでないもの（`文書片$）も含め，根が `root$ps に合致しない要素~tree
】【††
すなわち，視野を見渡している “視点”
】</p>

<p>
`視野~付き$にされた選択子は、
その`視野ng根$の子孫である要素のみに合致する
（選択子を成す残りの部分†に対する照合は制約されない
— 視野に入る必要があるのは、
当の選択子の`~subject$を成す要素たちに限られる††）。
◎
When a selector is scoped, it matches an element only if the element is a descendant of the scoping root. (The rest of the selector can match unrestricted; it’s only the final matched elements that must be within the scope.)
</p>

<p class="trans-note">【†
“残りの部分（ `the rest^en ）” とは、
当の選択子（`複階-選択子$）を成す最後の “単位”
— 要素に直に合致する`複合-選択子$
（`~subject$が疑似要素である場合は`疑似-複合-選択子$も含む） —
以外を指す。
例えば，選択子 "`a &gt; b^css" を成す “残り” は、
"`a &gt;^css" （ `b^css 以外）を指す。
】【††
言い換えれば、
視野~付きでない下で合致した要素たちを`視野ng根$の子孫のみを残すよう絞込む。
】</p>

<div class="example">
<p>
例えば， `DOM$r にて定義される `querySelector()$c ~methodでは、［
選択子を当の要素による`視野~付き$にして評価する
］ことを作者に許容する。
◎
For example, the querySelector() method defined in [DOM] allows the author to evaluate a scoped selector relative to the element it’s called on.
</p>

<p>
`widget.querySelector("a")^c
の様な~callは、
 `widget^e 要素の内側に在る `a^e 要素のみを見出すことになる
— 文書~内に散らばっている他の `a^e 要素は無視して。
◎
A call like widget.querySelector("a") will thus only find a elements inside of the widget element, ignoring any other as that might be scattered throughout the document.
</p>
</div>

		</section>
		<section id="relative">
<h3 title="Relative Selectors">3.4. 相対~選択子</h3>

<p>
ある種の文脈は、
`相対~選択子@
（ `relative selector^en ）
を受容し得る。
それは、［
1 個~以上の
`~anchor要素@
に相対的な要素を表現する選択子
］用の略式である。
相対~選択子は、
`結合子$から始まる
— 結合子が無い場合，暗黙な`子孫~結合子$が先頭に在る。
加えて、
当の選択子の先頭には，`~anchor要素$を表現している暗黙な選択子が在る。
◎
Certain contexts may accept relative selectors, which are a shorthand for selectors that represent elements relative to one or more relative selector anchor elements. Relative selectors begin with a combinator, with a selector representing the anchor element implied at the start of the selector. (If no combinator is present, the descendant combinator is implied.)
</p>

<p class="trans-note">【
“相対” は、
`構造と各種用語§ にて定義される各種~選択子の階層関係とは別々な，それらを拡張する概念である。
】【
暗黙な`子孫~結合子$を伴う相対~選択子は、
構文上は，通常の選択子と判別し得ない。
相対~選択子を利用できるのは、
それを明示的に期待する所に限られよう。
】【
通常の選択子は、
“先頭に［
`~anchor要素$として `root$ps, 暗黙な`子孫~結合子$
］を伴う`相対~選択子$である”
と解釈することもできる。
】</p>

<p>
`文法$においては、
`相対~選択子$は `relative-selector$t により表現され，
それらが成す~listは `relative-selector-list$t により表現される。
◎
Relative selectors are represented by &lt;relative-selector&gt; in the selectors grammar, and lists of them by &lt;relative-selector-list&gt;.
</p>

		</section>
		<section id="pseudo-classes">
<h3 title="Pseudo-classes">3.5. 疑似類</h3>

<p>
`疑似類@
（ `pseudo-class^en ）は、
文書~treeの外側にある情報に基づく選択を, あるいは
他の`単純-選択子$を利用して表出するには不便または不可能な選択を許可するような，`単純-選択子$である。
疑似類は、
文書~自身は変化しなくとも，［
利用者が文書とヤリトリする間に，要素は疑似類を獲得したり, 失ったりし得る
］イミで動的でもある。
`疑似類$は、［
文書~source／文書~tree
］に現れたり，それを改変することはない。
◎
Pseudo-classes are simple selectors that permit selection based on information that lies outside of the document tree or that can be awkward or impossible to express using the other simple selectors. They can also be dynamic, in the sense that an element can acquire or lose a pseudo-class while a user interacts with the document, without the document itself changing. Pseudo-classes do not appear in or modify the document source or document tree.
</p>

<div class="p">
<p>
`疑似類$の構文は、
次が成す並びとして与えられる：
</p>
<ol>
	<li>
~colon（ `003A^U ）
</li>
	<li>
`疑似類$の名前を表す`~CSS識別子$
</li>
	<li>
`関数形~疑似類@
（ `functional pseudo-class^en ）である場合に限り
⇒
丸括弧で括られた 0 個以上の引数
</li>
</ol>
◎
The syntax of a pseudo-class consists of a ":" (U+003A COLON) followed by the name of the pseudo-class as a CSS identifier, and, in the case of a functional pseudo-class, a pair of parentheses containing its arguments.
</div>

<p class="example">
例えば、
`valid$ps は定例の疑似類であり,
`lang()$ps は`関数形~疑似類$である。
◎
For example, :valid is a regular pseudo-class, and :lang() is a functional pseudo-class.
</p>

<p>
すべての~CSS~keywordと同様に、
`疑似類$の名前は `~ASCII大小無視$である。
~colonと`疑似類$の名前の間には，`空白$は許容されない。
また，通例の~CSS構文と同様、
関数の名前と後続の開き丸括弧の間にも`空白$は許容されない
（しがたって， ~CSS `function-token$t を形成する）。
通例の~CSS構文と同様、
他から指定されない限り，`関数形~疑似類$の各~引数の周囲には，`空白$は許容される。
◎
Like all CSS keywords, pseudo-class names are ASCII case-insensitive. No white space is allowed between the colon and the name of the pseudo-class, nor, as usual for CSS syntax, between a functional pseudo-class’s name and its opening parenthesis (which thus form a CSS function token). Also as usual, white space is allowed around the arguments inside the parentheses of a functional pseudo-class unless otherwise specified.
</p>

<p>
`疑似類$は、
他の`単純-選択子$と同様に，選択子に包含されるすべての`複合-選択子$において許容されるが、
`型~選択子$, または`全称~選択子$（もし在れば）に後続しなければナラナイ。
◎
Like other simple selectors, pseudo-classes are allowed in all compound selectors contained in a selector, and must follow the type selector or universal selector, if present.
</p>

<p class="note">注記：
`疑似類$には、
両立し得ないものもある
（それらを包含している`複合-選択子$は、
妥当であるが，何にも合致しないことになる）。
他のものは、
同じ要素に同時に適用し得る。
◎
Note: Some pseudo-classes are mutually exclusive (such that a compound selector containing them, while valid, will never match anything), while others can apply simultaneously to the same element.
</p>

		</section>

		<section id="pseudo-elements">
<h3 title="Pseudo-elements">3.6. 疑似要素</h3>

<p>
`疑似要素@
（ `pseudo-element^en ）は，
文書~tree内には直に現れない “`要素^em” を表現する
— ある種の`疑似類$が［
文書~treeには直に現れない追加的な状態~情報
］を表現するのと類似に。
`疑似要素$は、［
文書~言語が供するものを超える，文書~treeについての抽象-化
］を創出するために利用される
— 例えば、［
文書~言語の要素に対応しない，文書を成すある部位
］（要素~境界と揃わない範囲, 文書の~tree構造に収まらないものも含む）
を選択するために利用され得る。
そのような部位は，例えば、［
文書~treeに含まれない内容／
文書~treeを別形へ投影した内容
］を表現したり，［
~style付け／
~layout／
利用者-ヤリトリ／
その他，文書~treeに反映されない処理n
］により供される情報に依拠する。
◎
Similar to how certain pseudo-classes represent additional state information not directly present in the document tree, a pseudo-element represents an element not directly present in the document tree. They are used to create abstractions about the document tree beyond those provided by the document tree. For example, pseudo-elements can be used to select portions of the document that do not correspond to a document-language element (including such ranges as don’t align to element boundaries or fit within its tree structure); that represent content not in the document tree or in an alternate projection of the document tree; or that rely on information provided by styling, layout, user interaction, and other processes that are not reflected in the document tree.
</p>

<p class="trans-note">【
“疑似要素” という語は、
この種の “要素” を`~subject$とする選択子を意味することもある
— それは、
実際には， “疑似要素~選択子” の略称である。
】【
（文書~tree内の）`要素＠~CSSDISP#elements$は、
疑似要素との区別を強勢するよう “本物の要素（ `real element^en ）” と称されることもある
— それでも、
語 “要素” が［
疑似要素, 本物の要素
］の総称を意味することにはならないが。
】</p>

<div class="example">
<p>
例えば，文書~言語は［
要素~内容を成す最初の行l, それを成す最初の字l
］に~accessする仕組みを提供しないが、
それを~styleすることを許容する`疑似要素$
（ `first-line$pe, `first-letter$pe ）
はある。
とりわけ， `first-line$pe の事例では、［
当の疑似要素が，内容を成す どの部位を表現するか
］は，［
文書~treeからは推定し得ない~layout情報
］に依存することに注意。
◎
For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content, but there exist pseudo-elements (::first-letter and ::first-line) that allow those things to be styled. Notice especially that in the case of ::first-line, which portion of content is represented by the pseudo-element depends on layout information that cannot be inferred from the document tree.
</p>

<p>
`疑似要素$には、
文書に元から存在しない内容を表現するものもある
— 要素の［
前／後
］に追加的な内容を挿入する［
`before$pe ／ `after$pe
］疑似要素など。
◎
Pseudo-elements can also represent content that doesn’t exist in the source document at all, such as the ::before and ::after pseudo-elements which allow additional content to be inserted before or after the contents of any element.
</p>
</div>

<p>
`疑似要素$は、
`疑似類$と同様に，［
文書~source／文書~tree
］内に現れることも, それを改変することもない。
したがって，疑似要素は、
`構造上の疑似類$の解釈にも, ［
その`出自の要素$【`最終的な出自の要素$】 %要素 や %要素 が関与する~tree
］に係わる他の選択子の解釈にも影響しない。
◎
Like pseudo-classes, pseudo-elements do not appear in or modify the document source or document tree. Accordingly, they also do not affect the interpretation of structural pseudo-classes or other selectors pertaining to their originating element or its tree.
</p>

<p>
どの疑似要素が存在し, その型は何で, どのような能があるかは、
~host言語が定義する。
~CSSに存在する疑似要素は、
`CSS-PSEUDO-4$r にて定義される
— うち一部は、
`~level 2$, `~level 3$ においても定義される。
【網羅的ではない — 疑似要素を定義する~CSS~moduleは他にもある。】
◎
The host language defines which pseudo-elements exist, their type, and their abilities. Pseudo-elements that exist in CSS are defined in [CSS21] (Level 2), [SELECT] (Level 3), and [CSS-PSEUDO-4] (Level 4).
</p>

			<section id="pseudo-element-syntax">
<h4 title="Syntax">3.6.1. 構文</h4>

<div class="p">
<p>
`疑似要素$の構文は、
次が成す並びである：
</p>
<ol>
	<li>
"`::^css" （ 2 個の `003A^U が成す並び）
</li>
	<li>
`疑似要素$の名前を表す`~CSS識別子$
</li>
	<li>
`関数形~疑似要素@
の事例では、
丸括弧で括られた引数~群
</li>
</ol>
◎
The syntax of a pseudo-element is "::" (two U+003A COLON characters) followed by the name of the pseudo-element as an identifier, and, in the case of a functional pseudo-element, a pair of parentheses containing its arguments.＼
</div>

<p>
`疑似要素$の名前は、
`~ASCII大小無視$である。
◎
Pseudo-element names are ASCII case-insensitive.＼
</p>

<p>
次に挙げる箇所には，`空白$は許容されない
⇒＃
2 個の~colonの合間,
~colonと`疑似要素$の名前の合間
◎
No white space is allowed between the two colons, or between the colons and the name.
</p>

<p>
疑似要素と疑似類は、
`~level 2$ までは，
ともに 1 個の~colonによる構文で一緒くたにされていた。
なので，~UAは、
~level 2 までの疑似要素
— `before$pe, `after$pe, `first-line$pe, `first-letter$pe —
用には，~colon 1 個による記法も受容するモノトスル。
この［
互換性を得るための記法
］は、
他の疑似要素には許容されない。
この構文は，非推奨にされたので、
作者は，これらの疑似要素にも`~level 3$ 以上の二重~colon構文を利用するベキである。
◎
Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 &amp; 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed for any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.
</p>

<p>
`疑似要素$は、
`無特能$であり，他のどの選択子にも合致し得ない。
◎
Pseudo-elements are featureless, and so can’t be matched by any other selector.
</p>

			</section>
			<section id="pseudo-element-attachment">
<h4 title="Binding to the Document Tree">3.6.2. 文書~treeへの束縛-法</h4>

<p>
`疑似要素$は，~tree内に独立に存在することはない
— それは常に、
その
`出自の要素@
（ `originating element^en ）と呼ばれる，~page上の別の要素に束縛される。
構文上は、
`疑似要素$は，その`出自の要素$を表現している`複合-選択子$の直後に続く。
この`複合-選択子$が省略された場合、
それは，`全称~選択子$ `*^css であるものと見做される。
◎
Pseudo-elements do not exist independently in the tree: they are always bound to another element on the page, called their originating element. Syntactically, a pseudo-element immediately follows the compound selector representing its originating element. If this compound selector is omitted, it is assumed to be the universal selector *.
</p>

<p class="trans-note">【
`出自の要素$は，`出自の疑似要素$の概念も包摂するが、
この段落は，そのことを織り込んでいない。
】</p>

<div class="example">
<p>
例えば、
選択子 `div a::before^css において，頭部の選択子に合致する `a^e 要素は、
~~付随する `before$pe 疑似要素~用の`出自の要素$になる。
◎
For example, in the selector div a::before, the a elements matched by the selector are the originating elements for the ::before pseudo-elements attached to them.
</p>

<p>
選択子 `::first-line^css は，`*::first-line^css と等価であり、
文書~内の各 要素`ごとに^em，その `first-line$pe 疑似要素を選択する。
◎
The selector ::first-line is equivalent to *::first-line, which selects the ::first-line pseudo-element on every element in the document.
</p>
</div>

<p>
`疑似要素$ %S を含んでいる選択子においては、
選択子の中の
%S より前を成す部分が %S 用の`出自の要素$を選択し，
%S より後を成す部分は（もしあれば） %S 自身に適用される（次節を見よ）。
◎
When a pseudo-element is encountered in a selector, the part of the selector before the pseudo-element selects the originating element for the pseudo-element; the part of the selector after it, if any, applies to the pseudo-element itself. (See below.)
</p>

			</section>
			<section id="pseudo-element-states">
<h4 title="Pseudo-classing Pseudo-elements">3.6.3. 疑似要素に対する疑似類による絞り込み</h4>

<p>
ある種の`疑似要素$には、
その直後に，［
ある種の`疑似類$たちが成す任意の組合n
］が後続してもヨイ
【`疑似-複合-選択子$を見よ】
— その事例では、
当の`疑似要素$は，それらの疑似類に対応する状態にあるときに限り表現される。
この仕様は、
どの`疑似要素$にも，各種［
`論理-組合n疑似類$, `利用者~動作~疑似類$
］からなる任意の組合nが後続することを許容する。
他の仕様は、
特定0の`疑似要素$に追加的な`疑似類$が~~付随することを許容してもヨイ。
明示的に許容されたものでない組合nは、
`無効な選択子$になる。
◎
Certain pseudo-elements may be immediately followed by any combination of certain pseudo-classes, in which case the pseudo-element is represented only when it is in the corresponding state. This specification allows any pseudo-element to be followed by any combination of the logical combination pseudo-classes and the user action pseudo-classes. Other specifications may allow additional pseudo-classes to be attached to particular pseudo-elements. Combinations that are not explicitly allowed are invalid selectors.
</p>

<p class="note">注記：
`論理-組合n疑似類$は、
それが置かれる位置における［
選択子の妥当性
］に対する制約を，その引数へ引き継ぐ。
◎
Note: The logical combination pseudo-classes pass any restrictions on validity of selectors at their position to their arguments.
</p>

<div class="example">
<p>
例えば， `hover$ps 疑似類は、
どの`疑似要素$にも適用し得るものと指定されている
— なので、
`::first-line:hover^css は，最初の行l~上に~hoverされたときに合致することになる。
一方で，［
`focus$ps, `first-line$pe
］は、
いずれも［
`first-line$pe に `focus$ps を適用し得る
］ものとは定義されていない
— なので、
選択子 `::first-line:focus^css に合致するものは，決してないことになる。
◎
For example, since the :hover pseudo-class specifies that it can apply to any pseudo-element, ::first-line:hover will match when the first line is hovered. However, since neither :focus nor ::first-line define that :focus can apply to ::first-line, the selector ::first-line:focus will never match anything.
</p>

<p>
`::first-line:hover^css と `:hover::first-line^css とは、
かなり異なることに注意。
後者は、
~hoverされた どの`出自の要素$に対しても，その最初の行lに合致する。
例えば， `:hover::first-line^css は、
段落を成す どの行lに~hoverされたときでも，当の段落を成す最初の行lに合致する。
一方で， `::first-line:hover^css が合致するのは、
最初の行lに~hoverされたときに限られる。
◎
Notice that ::first-line:hover is very different from :hover::first-line, which matches the first line of any originating element that is hovered! For example, :hover::first-line also matches the first line of a paragraph when the second line of the paragraph is hovered, whereas ::first-line:hover only matches if the first line itself is hovered.
</p>
</div>

			</section>
			<section id="sub-pseudo-elements">
<h4 title="Sub-pseudo-elements">3.6.4. 下位-疑似要素</h4>

<p>
`疑似要素$には、
他の`疑似要素$の`出自の要素$になり得るものもある
— 前者は後者の
`出自の疑似要素@
（ `originating pseudo-element^en ）
と称され，後者は前者の
`下位-疑似要素@
（ `sub-pseudo-element^en ）として定義される。
例えば，
`list-item$v `表示~型$に `before$pe が与えられたとき、
それは，その`下位-疑似要素$ `::before::marker^css の`出自の疑似要素$になる。
◎
Some pseudo-elements are able to be the originating element of other pseudo-elements, which are defined as the sub-pseudo-elements of this originating pseudo-element. For example, when ::before is given a list-item display type, it becomes the originating pseudo-element of its ::before::marker sub-pseudo-element.
</p>

<p>
`出自の要素$が本物の（疑似要素でない）要素であることを一義化する必要があるときは、
`最終的な出自の要素@
（ `ultimate originating element^en ）と称される。
◎
Where disambiguation is needed, the term ultimate originating element refers to the real (non-pseudo) element from which a pseudo-element originates.
</p>

<p class="trans-note">【
“最終的” とは、
`出自の要素$を本物の要素に達するまで遡ることを意味する
— すなわち、
所与の`疑似要素$ %E に対し， %E の`最終的な出自の要素$は、
%E の`出自の要素$ %F に応じて［
疑似要素であるならば %F の`最終的な出自の要素$／
（本物の）要素であるならば %F
］として定義される。
】</p>

<p>
別の仕様にて，対応している`下位-疑似要素$が存在するものと明示的に定義されない限り、
疑似要素~選択子は，別の疑似要素~選択子と複合されたときには無効になる。
例えば、
`::before::before^css は`無効な選択子$になるが，
`::before::marker^css は
（ `::before::marker^css `下位-疑似要素$を~supportする実装においては）
妥当になる。
◎
Unless the corresponding sub-pseudo-element is explicitly defined to exist in another specification, pseudo-element selectors are not valid when compounded to another pseudo-element selector. So, for example, ::before::before is an invalid selector, but ::before::marker is valid (in implementations that support the ::before::marker sub-pseudo-element).
</p>

<p class="trans-note">【
構文上は`疑似-複合-選択子$の形をとり、
順序も有意になる
（順序を逆にした `::marker::before^css は、［
`marker^pe の`下位-疑似要素$として `before^pe が存在する
］ものと定義されない限り，無効になる）。
】</p>

			</section>
			<section id="pseudo-element-structure">
<h4 title="Internal Structure">3.6.5. 内部~構造</h4>

<p>
一部の`疑似要素$は、
内部~構造を有するものと定義される。
その種の`疑似要素$には，その関係性を表出するために［
`子~結合子$／`子孫~結合子$
］が後続していてもよい。
他の疑似要素については、
`結合子$が後続する場合，`無効な選択子$になる。
◎
Some pseudo-elements are defined to have internal structure. These pseudo-elements may be followed by child/descendant combinators to express those relationships. Selectors containing combinators after the pseudo-element are otherwise invalid.
</p>

<div class="example">
<p>
例えば，［
`::first-letter + span^css ／
`::first-letter em^css
］は、
無効な選択子になる。
しかしながら，
新たな `shadow$pe 疑似要素が内部~構造を有するものと定義されていたなら、
`::shadow &gt; p^css は，選択子として妥当になろう。
【 `shadow^pe は（現在の編集者草案においては）廃された。】
◎
For example, ::first-letter + span and ::first-letter em are invalid selectors. However, if a new ::shadow pseudo-element were defined to have internal structure, ::shadow &gt; p would be a valid selector.
</p>
</div>

<p class="note">注記：
既存の疑似要素の能力は，将来の仕様により拡げられることもあるので、
現在は無効でも
（例 `::first-line :any-link^css ），
未来には妥当になり得る。
◎
Note: A future specification may expand the capabilities of existing pseudo-elements, so some of these currently-invalid selectors (e.g. ::first-line :any-link) may become valid in the future.
</p>

<p>
そのような`疑似要素$の子は、
同時に他の要素の子にもなり得る。
しかしながら、
少なくとも~CSSにおける それらの具現化は，
`~box~tree$の~tree構造たる部分は保守される様に定義されなければナラナイ。
◎
The children of such pseudo-elements can simultaneously be children of other elements, too. However, at least in CSS, their rendering must be defined so as to maintain the tree-ness of the box tree.
</p>

			</section>
		</section>
		<section id="case-sensitive">
<h3 title="Characters and case sensitivity">3.7. 文字大小比較</h3>

<p>
すべての~Selectors構文は、
その制御~下にない部分【他の仕様に委ねられる部分】を除いて，`~ASCII大小無視$である
（すなわち， [a-z] と [A-Z] は等価と見なされる）
— 特定的には、
文書~言語の［
要素~名, 属性~名, 属性~値
］における文字大小比較は，文書~言語に依存する。
◎
All Selectors syntax is ASCII case-insensitive (i.e. [a-z] and [A-Z] are equivalent), except for the parts that are not under the control of Selectors: specifically, the case-sensitivity of document language element names, attribute names, and attribute values depends on the document language.
</p>

<div class="example">
<p>
例えば、
~HTMLにおいては，［
要素~名, 属性~名
］は`~ASCII大小無視＠~HTMLselectors#case-sensitivity-of-selectors$であるが、
~XMLにおいては，文字大小は区別される。
◎
For example, in HTML, element and attribute names are ASCII case-insensitive, but in XML, they are case-sensitive.
</p>
</div>

<p>
名前空間~接頭辞の文字大小比較は、
`CSS3NAMESPACE$r にて定義される。
`言語~範囲$の文字大小比較は、
`lang()$PS にて定義される。
◎
Case sensitivity of namespace prefixes is defined in [CSS3NAMESPACE]. Case sensitivity of language ranges is defined in the :lang() section.
</p>

<div class="p">
<p>
~Selectorsにおける
`空白@
は、
次に挙げる符号位置のみからなる
⇒＃
`0020^U0 `SPACE^cn,
`0009^U0 `TAB^cn,
`000A^U0 `LINE FEED^cn,
`000D^U0 `CARRIAGE RETURN^cn,
`000C^U0 `FORM FEED^cn
</p>

<p>
空白に似た他の符号位置
（例： `2003^U0 `EM SPACE^cn, `3000^U0 `IDEOGRAPHIC SPACE^cn ）
は、
構文上は，`空白$を成すものとは決して見なされない。
</p>
◎
White space in Selectors consists of the code points SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE RETURN (U+000D), and FORM FEED (U+000C). Other space-like code points, such as EM SPACE (U+2003) and IDEOGRAPHIC SPACE (U+3000), are never considered syntactic white space.
</div>

<p>
~Selectorsにおける符号位置は、
`~escape法$【！ CSS2 の`~escape法~規則$ `CSS21$r 】に則って，~backslash `005C^U により~escapeできる。
文字~escape法は，~Selectorsの中でその文字が持ち得る特別な意味を “取り消す”ことに注意。
例えば，選択子
`#foo&gt;a^css
は`結合子$を包含しているが、
`#foo\&gt;a^css
は 代わりに~ID `foo&gt;a^l を伴う要素を選択する。
◎
Code points in Selectors can be escaped with a backslash according to the same escaping rules as CSS. [CSS21] Note that escaping a code point “cancels out” any special meaning it may have in Selectors. For example, the selector #foo&gt;a contains a combinator, but #foo\&gt;a instead selects an element with the id foo&gt;a.
</p>

		</section>
		<section id="namespaces">
<h3 title="Declaring Namespace Prefixes">3.8. 名前空間~接頭辞の宣言-法</h3>

<p>
一部の選択子は、
名前空間~接頭辞を~supportする。
名前空間~接頭辞を
`宣言-@
する仕組みは、
~Selectorsを利用する言語により指定されるベキである。
言語が名前空間~接頭辞の宣言の仕組みを指定しない場合、
いかなる接頭辞も宣言されない。
~CSSにおいては、
名前空間~接頭辞は `namespace$at 規則 `CSS3NAMESPACE$r により宣言される。
◎
Certain selectors support namespace prefixes. The mechanism by which namespace prefixes are declared should be specified by the language that uses Selectors. If the language does not specify a namespace prefix declaration mechanism, then no prefixes are declared. In CSS, namespace prefixes are declared with the @namespace rule. [CSS3NAMESPACE]
</p>

		</section>
		<section id="invalid">
<h3 title="Invalid Selectors and Error Handling">3.9. 無効な選択子と~errorの取扱い</h3>

<p>
次に挙げるものは、
`無効な選択子@
（ `invalid selector^en, 妥当でない選択子）
になる
— ~UAは、
それらの取扱い規則に従うモノトスル：
◎
User agents must observe the rules for handling invalid selectors:
</p>

<ul>
	<li>
選択子の構文解析-時に~errorになるもの
— 例：認識できない~tokenや, 構文解析のある地点にて許容されない~tokenを含むもの
（【！overall】`文法§, 選択子ごとの構文~定義を見よ）
◎
a parsing error in a selector, e.g. an unrecognized token or a token which is not allowed at the current parsing point (see overall § 18 Grammar and per-selector syntax definitions), causes that selector to be invalid.
</li>
	<li>
`宣言-済み$でない名前空間~接頭辞を包含している`単純-選択子$
◎
a simple selector containing an undeclared namespace prefix is invalid
</li>
	<li>
無効な［
`単純-選択子$／`結合子$／~token
］を包含している選択子
◎
a selector containing an invalid simple selector, an invalid combinator or an invalid token is invalid.
</li>
	<li>
無効な選択子を包含している`選択子~list$
◎
a selector list containing an invalid selector is invalid.
</li>
	<li>
空な選択子
— すなわち，`複合-選択子$を包含しないもの
◎
an empty selector, i.e. one that contains no compound selector, is invalid.
</li>
</ul>

<p class="note">注記：
~CSSの構文解析における前方-互換な原則と整合するよう、
~UAは，自身が実用~levelで~supportしない［
疑似類／疑似要素／結合子／その他の構文-構成子
］を`無効な選択子$として扱うモノトスル。
`部分的な実装＠~CSSSNAPSHOT#conform-partial$を見よ。
◎
Note: Consistent with CSS’s forwards-compatible parsing principle, UAs must treat as invalid any pseudo-classes, pseudo-elements, combinators, or other syntactic constructs for which they have no usable level of support. See Partial implementations.
</p>

<p>
`無効な選択子$は、
空集合を表現するので，何にも合致しない。
◎
An invalid selector represents, and therefore matches, nothing.
</p>

		</section>
		<section id="legacy-aliasing">
<h3 title="Legacy Aliases">3.10. 旧来の別名</h3>

<p>
一部の選択子には、
`旧来の別名@sel
（ `legacy selector alias^en ）
がある†。
これは、
構文解析-時点に標準な名前に変換される名前である
（したがって、
当の選択子を表現している~obj~modelにおいては，どこにも現れない）。
◎
Some selectors have a legacy selector alias. This is a name which, at parse time, is converted to the standard name (and thus does not appear anywhere in any object model representing the selector).
</p>

<p class="trans-note">【†
`selector^en を外さずに訳すなら、
“ある旧来の選択子の名前であって，当の標準な選択子の旧来の別名とされるもの”
のようになろう。
】</p>

		</section>
	</section>
	<section id="logical-combination">
<h2 title="Logical Combinations">4. 論理的な組合n</h2>

<p>
選択子の論理は、［
`複合-選択子$（論理- AND ）,
`選択子~list$（論理- OR ）,
`論理-組合n疑似類$
］により操作できる。
`論理-組合n疑似類@
（ `logical combination pseudo-classes^en ）は，［
`is()$ps,
`where()$ps,
`not()$ps
］の総称であり、
他の`疑似類$が許容される どこでも許容されるが，そこでの制約を その引数へ引き継ぐ
（例えば，`複合-選択子$しか許容されない所に置かれた場合、
`is()$ps の中で妥当になるものは`複合-選択子$に限られる）。
◎
Selector logic can be manipulated by compounding (logical AND), selector lists (logical OR), and the logical combination pseudo-classes :is(), :where(), and :not(). The logical combination pseudo-classes are allowed anywhere that any other pseudo-classes are allowed, but pass any restrictions to their arguments. (For example, if only compound selectors are allowed, then only compound selectors are valid within an :is().)
</p>

<p class="note">注記：
［
`is()$ps ／ `where()$ps
］の内側では妥当でない引数は，
当の`疑似類$を無効~化することなく落とされるので、
文脈に応じた制約により無効~化される選択子~引数も，
同様に `is()$ps 疑似類~自体を無効~化することはない。
◎
Note: Since inside :is() and :where() invalid arguments are dropped without invaliding the pseudo-class itself, selector arguments that are invalidated by contextual restrictions likewise do not invalidate the :is() pseudo-class itself.
</p>

		<section id="grouping">
<h3 title="Selector Lists">4.1. 選択子~list</h3>

<p>
~comma（ `002C^U ）で分離された選択子たちが成す~list
— `選択子~list$ —
は、［
それを成す各`複階-選択子$により個別に選択された要素
］すべての和集合を表現する。
例えば，~CSSにおいては、
いくつかの選択子が同じ宣言を共有するときは，
それらを~commaで分離された~listに~group化してもよい。
~commaの前後には，`空白$が現れてもよい。
◎
A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the selector list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.
</p>

<p class="trans-note">【
“選択子~list（ `selector list^en ）” は、
`~level 3$ までは “選択子たちが成す~group （ `groups of selectors^en ）” と称されていた
（順序を含意する “~list” に改称されたのは、
CSSOM などの仕様にて選択子の処理~model（直列化）を定義する際に，
この名称の方が適切になるからと思われる）。
】</p>

<div class="example">
<p>
宣言が互いに一致する 3 つの規則を一つにまとめることを~~考える：
◎
CSS example: In this example, we condense three rules with identical declarations into one. Thus,
</p>

<pre class="lang-css">
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
</pre>

<p>
これは、
次と等価になる：
◎
is equivalent to:
</p>

<pre class="lang-css">
h1, h2, h3 { font-family: sans-serif }
</pre>
</div>

<p>
<strong>注意</strong>：
この例では，すべての選択子が妥当なので等価性が成り立つが、
これらのうち一つでも無効なものがあった場合，`選択子~list$全体が無効になる。
後者の書き方では， 3 個の~~見出し要素すべてに対する規則が無効~化されることになる一方、
前者の書き方では，個別に無効~化されることになる。
◎
Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire selector list would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.
</p>

<div class="example">
<p>
無効な~CSSの例：
◎
Invalid CSS example:
</p>

<pre class="lang-css">
h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }
</pre>

<p>
は、次と等価ではない：
◎
is not equivalent to:
</p>

<pre class="lang-css">
h1, h2..foo, h3 { font-family: sans-serif }
</pre>

<p>
上の選択子（ `h1, h2..foo, h3^css ）は全体として無効であり，~style規則~全体が落とされるので。
（選択子が~group化されていなければ、
`h2..foo^css 用の規則のみが落とされる。）
◎
because the above selector (h1, h2..foo, h3) is entirely invalid and the entire style rule is dropped. (When the selectors are not grouped, only the rule for h2..foo is dropped.)
</p>
</div>

		</section>
		<section id="matches">
<h3 title="The Matches-Any Pseudo-class: :is()">4.2. 論理和： `is()^ps 疑似類</h3>

<p>
論理和（ `matches-any^en ） 疑似類
`is()@ps
は、
`forgiving-selector-list$t を唯一の引数にとる`関数形~疑似類$である。
◎
The matches-any pseudo-class, :is(), is a functional pseudo-class taking a &lt;forgiving-selector-list&gt; as its sole argument.
</p>

<p>
この疑似類は、［
引数を構文解析した結果の~list
］を成す［
いずれかの選択子に合致する要素
］に合致する。
結果の~listが空な場合でも、
この疑似類は
— 妥当であるが —
何にも合致しないことになる。
◎
If the argument, after parsing, is an empty list, the pseudo-class is valid but matches nothing. Otherwise, the pseudo-class matches any element that matches any of the selectors in the list.
</p>

<div class="note">
<p>注記：
`is()$ps 疑似類の詳細度は、
引数のうち最も詳細度が高いものに置換される。
したがって， `is()$ps で書かれた選択子の詳細度は、
`is()$ps を外して~~展開したものと等価になるとは限らない。
例えば，次に挙げる 2 つの選択子があるとき：
</p>
<ul>
	<li>
`:is(ul, ol, .list) &gt; [hidden]^css
</li>
	<li>
`ul &gt; [hidden], ol &gt; [hidden], .list &gt; [hidden]^css
</li>
</ul>
<p>
`ol$e の子のうち `hidden^a を有するものは、
前者の選択子には詳細度 (0,2,0) で合致する一方で，
後者の選択子には詳細度 (0,1,1) で合致する。
`選択子の詳細度の計算-法§を見よ。
</p>

◎
Note: The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument. Thus, a selector written with :is() does not necessarily have equivalent specificity to the equivalent selector written without :is() For example, if we have :is(ul, ol, .list) &gt; [hidden] and ul &gt; [hidden], ol &gt; [hidden], .list &gt; [hidden] a [hidden] child of an ol matches the first selector with a specificity of (0,2,0) whereas it matches the second selector with a specificity of (0,1,1). See § 17 Calculating a selector’s specificity.
</div>

<p>
疑似要素は，論理和 疑似類では表現し得ない
— それらは `is()$ps の中では妥当でない。
◎
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().
</p>

<p>
既定の名前空間~宣言は、
`is()$ps 疑似類の引数を成す どの選択子に対しても，
その`~subject$を表現している`複合-選択子$には
— それが明示的に［
`全称~選択子$ ／ `型~選択子$
］を包含している場合を除き —
影響しない。
◎
Default namespace declarations do not affect the compound selector representing the subject of any selector within a :is() pseudo-class, unless that compound selector contains an explicit universal selector or type selector.
</p>

<div class="example">
<p>
例えば，次の選択子は、
名前空間を問わず，［
~hover／~focus
］された任意の要素に合致する。
したがって、
それが合致するものは，既定の名前空間に属する要素のみに制限されない。
◎
For example, the following selector matches any element that is being hovered or focused, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are being hovered or focused.
</p>

<pre class="lang-css">
*|*:is(:hover, :focus)
</pre>

<p>
一方で，次の選択子は、［
~hover／~focus
］された要素のうち，既定の名前空間に属するもののみを表現する
【既定の名前空間は宣言-済みと見做すなら】。
`is()$ps 記法の中で明示的に`全称~選択子$が利用されているので：
◎
The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit universal selector within the :is() notation:
</p>

<pre class="lang-css">
*|*:is(*:hover, *:focus)
</pre>
</div>

<p>
この仕様の以前の草案では、
この疑似類~用の名前に
`matches()@ps
を利用していた。
~UAは、
後方-互換性に必要なら，
この廃用にされた名前を `is()$ps 用の`旧来の別名$selとして追加的に実装してもヨイ。
◎
As previous drafts of this specification used the name :matches() for this pseudo-class, UAs may additionally implement this obsolete name as a legacy selector alias for :is() if needed for backwards-compatibility.
</p>

		</section>
		<section id="negation">
<h3 title="The Negation (Matches-None) Pseudo-class: :not()">4.3. 否定： `not()^ps 疑似類</h3>

<p>
否定~疑似類
`not()@ps
は、
`complex-real-selector-list$t を引数にとる`関数形~疑似類$である。
それは，その引数で表現されない要素を表現する。
◎
The negation pseudo-class, :not(), is a functional pseudo-class taking a &lt;complex-real-selector-list&gt; as an argument. It represents an element that is not represented by its argument.
</p>

<p class="note">注記：
`~level 3$ においては、
1 個の`単純-選択子$に限り， `not()$ps の引数に許容されていた。
◎
Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().
</p>

<p class="note">注記：
`not()$ps 疑似類の詳細度は、［
その~list引数を成す各`複階-選択子$の詳細度
］のうち最も高いものに置換される
— したがって，その挙動は、
`:not(:is(<var>引数</var>))^css
と正確に同じになる。
`選択子の詳細度の計算-法§を見よ。
◎
Note: The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its argument; thus it has the exact behavior of :not(:is(argument)). See § 17 Calculating a selector’s specificity.
</p>

<p>
`疑似要素$は、
否定~疑似類では表現し得ない
— それらは `not()$ps の中では妥当でない。
◎
Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().
</p>

<div class="example">
<p>
次の選択子は、
~HTML文書の中で不能化されていないすべての `button$e 要素に合致する。
◎
For example, the following selector matches all button elements in an HTML document that are not disabled.
</p>

<pre class="lang-css">
button:not([DISABLED])
</pre>

<p>
次の選択子は、
`FOO^e 要素~以外のすべてを表現する：
◎
The following selector represents all but FOO elements.
</p>

<pre class="lang-css">
*:not(FOO)
</pre>

<p>
次の`複合-選択子$は、
~link以外のすべての~HTML要素【 ~HTML名前空間に属する要素】を表現する。
◎
The following compound selector represents all HTML elements except links.
</p>

<pre class="lang-css">
html|*:not(:link):not(:visited)
</pre>
</div>

<p>
`is()$ps のときと同じく，既定の名前空間~宣言は、
`not()$ps 疑似類の引数を成す どの選択子に対しても，
その`~subject$を表現している`複合-選択子$には
— それが明示的に［
`全称~選択子$ ／ `型~選択子$
］を包含している場合を除き —
影響しない（ `is()$ps の例を見よ）。
◎
As with :is(), default namespace declarations do not affect the compound selector representing the subject of any selector within a :not() pseudo-class, unless that compound selector contains an explicit universal selector or type selector. (See :is() for examples.)
</p>

<p class="note">注記：
`not()$ps 疑似類は、
“無用な” 選択子を書くことも許容する。
例えば， `:not(*|*)^css は、
どの要素も表現しない。
あるいは， `div:not(span)^css は、
`詳細度$がより高くなることを除いて，
`div^css と等価になる。
◎
Note: The :not() pseudo-class allows useless selectors to be written. For instance :not(*|*), which represents no element at all, or div:not(span), which is equivalent to div but with a higher specificity.
</p>

		</section>
		<section id="something">
<h3 title="The Specificity-adjustment Pseudo-class: :where()">4.4. 詳細度~調整： `where()^ps 疑似類</h3>

<p>
詳細度~調整 疑似類
`where()@ps
は、
`is()$ps と同じ［
構文, 機能性
］を備える`関数形~疑似類$であるが、
`is()$ps と違って，選択子の`詳細度$には寄与しない（その引数も含めて）
— `where()$ps の`詳細度$は、
常に 0 になる。
◎
The Specificity-adjustment pseudo-class, :where(), is a functional pseudo-class with the same syntax and functionality as :is(). Unlike :is(), neither the :where() pseudo-class, nor any of its arguments, contribute to the specificity of the selector—its specificity is always zero.
</p>

<p>
これは、
選択子~内に~filterを導入しつつ，それに結付けられた~style宣言も上書きし易く保つときに有用になる。
◎
This is useful for introducing filters in a selector while keeping the associated style declarations easy to override.
</p>

<div class="example">
<p>
経験的な詳細度が作者の期待に沿わないような，共通的な例：
◎
Below is a common example where the specificity heuristic fails to match author expectations:
</p>

<pre class="lang-css">
a:not(:hover) {
  text-decoration: none;
}

nav a {
  /* <span class="comment">
効果なし
◎
Has no effect
</span> */
  text-decoration: underline;
}
</pre>

<p>
しかしながら， `where()$ps を利用すれば、
作者は，自身の意図を明示的に宣言できる：
◎
However, by using :where() the author can explicitly declare their intent:
</p>

<pre class="lang-css">
a:where(:not(:hover)) {
  text-decoration: none;
}

nav a {
  /* <span class="comment">
今度は働く
◎
Works now!
</span> */
  text-decoration: underline;
}
</pre>
</div>

<p class="note">注記：
~Selectorsの将来~levelでは、［
この疑似類の~instanceに明示的に詳細度を設定する
］ための追加的な引数を導入するかもしれない。
◎
Note: Future levels of Selectors may introduce an additional argument to explicitly set the specificity of that instance of the pseudo-class.
</p>
		</section>
		<section id="relational">
<h3 title="The Relational Pseudo-class: :has()">4.5. 関係上の： `has()^ps 疑似類</h3>

<p>
関係上の疑似類
`has()@ps
は、
`relative-selector-list$t を引数にとる`関数形~疑似類$である。
それは、
次を満たす要素 %E を表現する
⇒
引数を成すいずれかの`相対~選択子$ %S は、
次を満たす
⇒
`~anchor要素$として %E を与える下で %S を評価したとき，合致する要素が在る。
◎
The relational pseudo-class, :has(), is a functional pseudo-class taking a &lt;relative-selector-list&gt; as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element.
</p>

<p>
`has()$ps 疑似類は，入子にできない
— `has()$ps の中の `has()$ps は妥当でない。
`疑似要素$も、
<dfn id="has-allowed-pseudo-element">`has()^ps の中で許容される</dfn>
ものと明示的に定義されない限り，
`has()$ps の中では妥当な選択子でない
（そのような疑似要素は、
この仕様では定義されないが，他の仕様にて定義され得る）。
◎
The :has() pseudo-class cannot be nested; :has() is not valid within :has(). Also, unless explicitly defined as a :has-allowed pseudo-element, pseudo-elements are not valid selectors within :has(). (This specification does not define any :has-allowed pseudo-elements, but other specifications may do so.)
</p>

<p class="note">注記：
疑似要素は、
一般に `has()$ps から除外される
— それらの多くは，その先祖の~style付けに基づいて条件付きで存在するので、
それらを `has()$ps により~queryすることを許容すると，
循環依存を導入することになるので。
◎
Note: Pseudo-elements are generally excluded from :has() because many of them exist conditionally, based on the styling of their ancestors, so allowing these to be queried by :has() would introduce cycles.
</p>

<p class="note">注記：
`has()$ps が引数にとる `relative-selector-list$t は、
`内来的^emに`複階-選択子$になる
（それは、
たぶん暗黙的に，結合子から開始するので）。
このことは、
`複階-選択子$を許容しない文脈においては `has()$ps を利用できないことを意味する
— 利用しても引数は無効になることが保証される。
◎
Note: Since :has() takes a &lt;relative-selector-list&gt;, its arguments are inherently complex selectors (because they start, perhaps implicitly, with a combinator). This means :has() cannot be used in contexts that don’t allow complex selectors; its arguments will be guaranteed to be invalid.
</p>

<div class="example">
<p>
例えば，次に挙げる選択子に合致するものは：
◎
For example,＼
</p>
<ul>
	<li>
`a:has(&gt; img)^css
⇒
`a^e 要素のうち，子として `img^e 要素が在るもの。
◎
the following selector matches only &lt;a&gt; elements that contain an &lt;img&gt; child:
• a:has(&gt; img)
</li>
	<li>
`dt:has(+ dt)^css
⇒
`dt^e 要素のうち，直後に別の `dt^e 要素が在るもの。
◎
The following selector matches a &lt;dt&gt; element immediately followed by another &lt;dt&gt; element:
• dt:has(+ dt)
</li>
	<li>
<p>
`section:not(:has(h1, h2, h3, h4, h5, h6))^css
⇒
`section^e 要素のうち，~~見出し要素を包含しないもの。
◎
The following selector matches &lt;section&gt; elements that don’t contain any heading elements:
</p>

<p>
この選択子における疑似類の入子ng順序は重要であることに注意
— 逆順にした選択子
`section:has(:not(h1, h2, h3, h4, h5, h6))^css に合致するものは
⇒
`section^e 要素のうち，
~~見出し要素でない何らかの要素を包含するもの。
◎
Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:
• section:has(:not(h1, h2, h3, h4, h5, h6))
◎
...would result in matching any &lt;section&gt; element which contains anything that’s not a heading element.
</p>

	</li>
</ul>
</div>

		</section>
	</section>
	<section id="elemental-selectors">
<h2 title="Elemental selectors">5. 元素的な選択子</h2>

		<section id="type-selectors">
<h3 title="Type (tag name) selector">5.1. 型（~tag名）選択子</h3>

<p>
`型~選択子@
（ `type selector^en ）は、
文書~言語の要素~型の名前で書かれる
— それは、
文書~tree内の当の要素~型の~instanceを表現する。
◎
A type selector is the name of a document language element type, and represents an instance of that element type in the document tree.
</p>

<p class="example">
例えば 選択子 `h1^css は、
文書~内の `h1^e 要素を表現する。
◎
For example, the selector h1 represents an h1 element in the document.
</p>

<p>
`型~選択子$は、
`~CSS有修飾~名$
— 省略可能な名前空間~接頭辞を伴う`~CSS識別子$ —
として書かれる。
`CSS3NAMESPACE$r
（`元素的な選択子における名前空間§を見よ。）
◎
A type selector is written as a CSS qualified name: an identifier with an optional namespace prefix. [CSS3NAMESPACE] (See § 5.3 Namespaces in Elemental Selectors.)
</p>

		</section>
		<section id="the-universal-selector">
<h3 title="Universal selector">5.2. 全称~選択子</h3>

<p>
`全称~選択子@
（ `universal selector^en ）は、
特別な`型~選択子$であり，どの要素~型の要素も表現する。
◎
The universal selector is a special type selector, that represents an element of any element type.
</p>

<p>
それは、
局所~名として 1 個の~asterisk （ `002A^U ）を伴う`~CSS有修飾~名$として書かれる。
`型~選択子$と同様に，`全称~選択子$も、
ある名前空間に属する要素のみに制約するよう，名前空間で修飾でき、
`元素的な選択子における名前空間§にて定義されるとおり，既定の名前空間に影響される。
◎
It is written as a CSS qualified name with an asterisk (* U+002A) as the local name. Like a type selector, the universal selector can be qualified by a namespace, restricting it to only elements belonging to that namespace, and is affected by a default namespace as defined in § 5.3 Namespaces in Elemental Selectors.
</p>

<p>
選択子における`全称~選択子$の有無は、
`無特能$な要素を除き，［
当の選択子が要素に合致するかどうか
］に効果を及ぼすことはない
（`無特能$な要素は、
どの選択子†にも合致しない
— `全称~選択子$も含めて††）。
◎
Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector. (Featureless elements do not match any selector, including the universal selector.)
</p>

<p class="trans-note">【†
`無特能$な要素に合致するものと明示的に定義されたものを除く
— †† そのような選択子に`全称~選択子$も~~付された場合、
合致しなくなることになる。
】【
`全称~選択子$を表す~wildcard `002A^U は、［
ある要素~型（局所~名）で代用したとき合致するならば，合致する
］ことを表す。
】</p>

<div class="example">
<ul>
	<li>
`*[hreflang|=en]^css
と
`[hreflang|=en]^css
は等価。
◎
*[hreflang|=en] and [hreflang|=en] are equivalent,
</li>
	<li>
`*.warning^css
と
`.warning^css
は等価。
◎
*.warning and .warning are equivalent,
</li>
	<li>
`*#myid^css
と
`#myid^css
は等価。
◎
*#myid and #myid are equivalent.
</li></ul>
</div>

<p>
`全称~選択子$は、
他の`型~選択子$と同じ構文~規則に従う
— `複合-選択子$においては、
それは， 1 回まで, かつ最初の`単純-選択子$として現れなければナラナイ。
◎
The universal selector follows the same syntax rules as other type selectors: only one can appear per compound selector, and it must be the first simple selector in the compound selector.
</p>

<p class="note">注記：
照合の挙動には効果がなくとも、
`全称~選択子$を追加すれば，選択子は読み易くなることがある。
例えば `div :first-child^css は `div:first-child^css に見誤り易い。
`div *:first-child^css の方が違いが明白になる。
◎
Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example, div :first-child and div:first-child are somewhat difficult to tell apart at a quick glance, but writing the former as div *:first-child makes the difference obvious.
</p>

		</section>
		<section id="type-nmsp">
<h4 title="Namespaces in Elemental Selectors">5.3. 元素的な選択子における名前空間</h4>

<p>
［
`型~選択子$／`全称~選択子$
］には，省略可能な名前空間~成分も許容される。
すなわち，要素~名には、
`宣言-済み$な名前空間~接頭辞を
— 名前空間~分離子 `007C^U で分離して —
前置してもヨイ。
各~形における意味は：
◎
Type selectors and universal selectors allow an optional namespace component: a namespace prefix that has been previously declared may be prepended to the element name separated by the namespace separator “vertical bar” (| U+007C). (See, e.g., [XML-NAMES] for the use of namespaces in XML.) It has the following meaning in each form:
</p>

<dl>
	<dt>`%ns|%E^css</dt>
	<dd>
名前† %E を伴う要素のうち，名前空間 %ns ††に属するもの。
◎
elements with name E in namespace ns
</dd>
	<dd class="trans-note">【†
局所~名（以下も同様）。
】【††
精確には、
接頭辞 %ns に結付けられた名前空間
（ %ns が`宣言-済み$でない場合、
`無効な選択子$になる）。
】【
%ns が`~NULL名前空間$を表現する場合、
`|%E^css と等価になる。
】</dd>

	<dt>`*|%E^css</dt>
	<dd>
名前 %E を伴う すべての要素
— 名前空間を問わず。
◎
elements with name E in any namespace, including those without a namespace
</dd>

	<dt>`|%E^css</dt>
	<dd>
名前 %E を伴う要素のうち，
どの名前空間にも属さないもの†。
◎
elements with name E without a namespace
</dd>
	<dd class="trans-note">【†
言い換えれば、`~NULL名前空間$に “属する” もの。
】</dd>

	<dt>`%E^css</dt>
	<dd>
`既定の名前空間$は`宣言-済み$でない場合、
`*|%E^css と等価になる。
◎
if no default namespace has been declared for selectors, this is equivalent to *|E.＼
</dd>
	<dd>
他の場合、
%ns は既定の名前空間とするとき†，
`%ns|%E^css と等価になる。
◎
Otherwise it is equivalent to ns|E where ns is the default namespace.
</dd>
	<dd class="trans-note">【†
精確には、
ある`宣言-済み$な接頭辞 %ns に結付けられた名前空間も，既定の名前空間であるとするとき。
】</dd>
</dl>

<div class="example">
<p>
次の~CSSにおいて：
◎
CSS examples:
</p>

<pre class="lang-css">
@namespace foo url(http://www.example.com);
foo|h1 { color: blue }  /* 規則 1 */
foo|* { color: yellow } /* 規則 2 */
|h1 { color: red }      /* 規則 3 */
*|h1 { color: green }   /* 規則 4 */
h1 { color: green }     /* 規則 5 */
</pre>

<p>
規則 1 【！？(not counting the @namespace at-rule)】は、
名前空間
`http://www.example.com^l
に属する `h1^e 要素に限り合致することになる。
◎
The first rule (not counting the @namespace at-rule) will match only h1 elements in the "http://www.example.com" namespace.
</p>

<p>
規則 2 は、
名前空間
`http://www.example.com^l
に属する どの要素にも合致することになる。
◎
The second rule will match all elements in the "http://www.example.com" namespace.
</p>

<p>
規則 3 は、
どの名前空間にも属さない `h1^e 要素に限り合致することになる。
◎
The third rule will match only h1 elements with no namespace.
</p>

<p>
規則 4 は、
名前空間を問わず（属さないものも含め），どの `h1^e 要素にも合致することになる。
◎
The fourth rule will match h1 elements in any namespace (including those without any namespace).
</p>

<p>
規則 5 は、
既定の名前空間が宣言され【！defined】ていないので，規則 4 と等価になる。
◎
The last rule is equivalent to the fourth rule because no default namespace has been defined.
</p>
</div>

<p>
`既定の名前空間$が宣言された場合、
`型~選択子$を伴わない`複合-選択子$であっても，既定の名前空間に属する要素に限り合致する。
◎
If a default namespace is declared, compound selectors without type selectors in them still only match elements in that default namespace.
</p>

<div class="example">
<p>
例えば，次の~stylesheetに対しては：
◎
For example, in the following style sheet:
</p>

<pre class="lang-css">
@namespace url("http://example.com/foo");
.special { ... }
</pre>

<p>
選択子 `.special^css は、
（~DOMにおいては名前空間と対にされる）
型~名への参照が現れていないが，
名前空間 `http://example.com/foo^l に属する要素に限り合致する。
◎
The .special selector only matches elements in the "http://example.com/foo" namespace, even though no reference to the type name (which is paired with the namespace in the DOM) appeared.
</p>

<div class="trans-note">【
`.special^css は `*.special^css と等価であり、
上の~stylesheetは次と等価になるので：
】
<pre class="lang-css">
@namespace foo url("http://example.com/foo");
foo|*.special { ... }
</pre>
</div>
</div>

<p>
［
`型~選択子$／`全称~選択子$
］のうち，`宣言-済み$でない名前空間~接頭辞を伴うものは、
`無効な選択子$である。
◎
A type selector or universal selector containing a namespace prefix that has not been previously declared is an invalid selector.
</p>

		</section>
		<section id="the-defined-pseudo">
<h3 title="The Defined Pseudo-class: :defined">5.4. 定義-済み： `defined^ps 疑似類</h3>

<p>
~host言語によっては、
要素には［
“定義-済み” ／ “構築-済み”
］かそうでないかの区別がある。
`defined@ps
`疑似類$は、［
~host言語により，全部的に定義-済みな要素であると規定されるもの
］に合致する。
◎
In some host languages, elements can have a distinction between being “defined”/“constructed” or not. The :defined pseudo-class matches elements that are fully defined, as dictated by the host language.
</p>

<p>
~host言語にこの類の区別は無い場合、
それに属するすべての要素は `defined$ps に合致する。
◎
If the host language does not have this sort of distinction, all elements in it match :defined.
</p>

<div class="example">
<p>
~HTMLにおいては、
組込みの要素はすべて常に定義-済みと見なされるので，次の例は常に合致することになる：
◎
In HTML, all built-in elements are always considered to be defined, so the following example will always match:
</p>

<pre class="lang-css">
p:defined { ... }
</pre>

<p>
他方，`~custom要素$は、
始めから定義-済み`ではなく^em，`定義-済み$になるのは
`適正に登録された＠~HEcustom#element-definition$ときに限られる。
このことは、
~custom要素を登録されるまで隠すためとして，
`defined$ps 疑似類を利用できることを意味する：
◎
Custom elements, on the other hand, start out undefined, and only become defined when properly registered. This means the :defined pseudo-class can be used to hide a custom element until it has been registered:
</p>

<pre class="lang-css">
custom-element { visibility: hidden }

custom-element:defined { visibility: visible }
</pre>
</div>

		</section>
	</section>
	<section id="attribute-selectors">
<h2 title="Attribute selectors">6. 属性~選択子</h2>

<p>
~Selectorsでは、
要素の属性の表現も許容される。
選択子が ある要素 %要素 に対し合致する式として利用されるとき、
`属性~選択子@
（ `attribute selector^en ）は，［
%要素 が当の属性~選択子で表現される属性に合致する属性を有するならば，
%要素 に合致する
］ものと見なすモノトスル。
◎
Selectors allow the representation of an element’s attributes. When a selector is used as an expression to match against an element, an attribute selector must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.
</p>

<p class="issue">
`複数個の値の照合＠https://lists.w3.org/Archives/Public/www-style/2011Mar/0215.html$用に，~commaで分離された構文を追加するか？
— 例：
`[rel ~=next, prev, up, first, last]^css
◎
Add comma-separated syntax for multiple-value matching? e.g. [rel ~= next, prev, up, first, last]
</p>

<p class="trans-note">【
以下、
この節に現れる “%att 属性” は，
名前 %att を伴う内容~属性を表す。
】</p>

		<section id="attribute-representation">
<h3 title="Attribute presence and value selectors">6.1. 属性~存在p／属性~値 選択子</h3>

<p>
次に挙げる 4 種の`属性~選択子$は、
`~level 2$ にて導入された：
◎
CSS2 introduced four attribute selectors:
</p>
<dl>
	<dt>`[%att]^css</dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有する
◎
Represents an element with the att attribute,＼
</dd>
	<dd>
属性の値が何であれ。
◎
whatever the value of the attribute.
</dd>

	<dt>`[%att=%val]^css</dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，その値は %val 【が表現する文字列】に等しい
◎
Represents an element with the att attribute whose value is exactly "val".
</dd>

	<dt>`[%att~=%val]^css</dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，［
その値を`空白$で分離して得られる単語~listを成すいずれかの単語
］は %val に等しい
◎
Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val".＼
</dd>
	<dd>
%val に`空白$が含まれている場合、
何も表現しないことになる
（単語たちは`空白$で`分離される^emので）。
%val が空~文字列の場合も，何も表現しないことになる。
◎
If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.
</dd>

	<dt>`[%att|=%val]^css</dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，その値は次を満たす
⇒
%val に等しいか, ［
%val, `002D^U
］が成す並びで始まる
◎
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).＼
</dd>
	<dd>
これは首に［
`BCP47$r またはその後継版
］の言語 `subcode^en †と照合する用途が意図されている
（例：~HTMLの `a$e 要素の `hreflang^a 属性）。
`lang^a 属性
（または `xml:lang^a 属性）用の言語 `subcode^en 照合については `lang()$ps を見よ。
【† `subcode^en は、いわゆる下位tag（ `subtag^en ）と同義と思われる。】
◎
This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang() pseudo-class.
</dd>
</dl>

<p>
属性~値と照合される %val は、［
`ident-token$t ／ `string-token$t
］として与えられなければナラナイ。
`CSS3SYN$r
◎
Attribute values must be &lt;ident-token&gt;s or &lt;string-token&gt;s. [CSS3SYN]
</p>

<p class="trans-note">【
`~CSS識別子$でない（前者に合致しない）文字列は、
引用符で括る（後者として与える）必要がある。
】</p>

<div class="example">
<p>
次の`属性~選択子$は、
`h1^e 要素のうち［
`title^a 属性を有するもの
］を表現する
— 属性の値が何であれ：
◎
The following attribute selector represents an h1 element that carries the title attribute, whatever its value:
</p>

<pre class="lang-css">
h1[`title^a]
</pre>

<p>
次の選択子は、
`span$e 要素のうち［
`class^a 属性の値が `example^l に等しいもの
］を表現する：
◎
In the following example, the selector represents a span element whose class attribute has exactly the value "example":
</p>

<pre class="lang-css">
span[`class^a="example"]
</pre>

<p>
複数の`属性~選択子$を利用すれば、［
要素の複数の属性／同じ属性に対する複数の条件
］を表現できる。
次の選択子は、
`span$e 要素のうち［
`hello^a 属性の値が `Cleveland^l に等しい, かつ
`goodbye^a 属性の値が `Columbus^l に等しいもの
］を表現する：
◎
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute has exactly the value "Cleveland" and whose goodbye attribute has exactly the value "Columbus":
</p>

<pre class="lang-css">
span[`hello^a="Cleveland"][`goodbye^a="Columbus"]
</pre>

<p>
次の~CSS規則は、
"`=^css" と "`~=^css" の相違を示す：
1 個目の選択子は、
`a^e 要素のうち［
`rel^a 属性の値が，例えば `copyright copyleft copyeditor^l に等しいもの
］にも合致することになる。
2 個目の選択子は、
`a^e 要素のうち［
`href^a 属性の値が `http://www.w3.org/^l に等しいもの
］に限り合致することになる。
◎
The following CSS rules illustrate the differences between "=" and "~=". The first selector would match, for example, an a element with the value "copyright copyleft copyeditor" on a rel attribute. The second selector would only match an a element with an href attribute having the exact value "http://www.w3.org/".
</p>

<pre class="lang-css">
a[`rel^a~="copyright"] { ... }
a[`href^a="http://www.w3.org/"] { ... }
</pre>

<p>
次の選択子は、
`a^e 要素のうち［
`hreflang^a 属性が `fr^l に等しいもの
］を表現する：
◎
The following selector represents an a element whose hreflang attribute is exactly "fr".
</p>

<pre class="lang-css">
a[`hreflang^a=fr]
</pre>

<p>
次の選択子は、
`a^e 要素のうち［
`hreflang^a 属性の値が `en^l から始まるもの
］を表現する
— すなわち， `en^l, `en-US^l, `en-scouse^l なども含まれる：
◎
The following selector represents an a element for which the value of the hreflang attribute begins with "en", including "en", "en-US", and "en-scouse":
</p>

<pre class="lang-css">
a[`hreflang^a|="en"]
</pre>

<p>
次の 2 つの選択子は、
`character^a 属性がそれぞれ別の値をとる，
`DIALOGUE^e 要素を表現する
◎
The following selectors represent a DIALOGUE element whenever it has one of two different values for an attribute character:
</p>

<pre class="lang-css">
DIALOGUE[`character^a=romeo]
DIALOGUE[`character^a=juliet]
</pre>
</div>

		</section>
		<section id="attribute-substrings">
<h3 title="Substring matching attribute selectors">6.2. 部分照合 属性~選択子</h3>

<p>
属性~値の一部を成す文字列との照合~用に，
次に挙げる 3 種の`属性~選択子$が供される：
◎
Three additional attribute selectors are provided for matching substrings in the value of an attribute:
</p>

<dl>
	<dt><code class="css">[%att^=%val]</code></dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，その値は “接頭辞” %val から始まる
◎
Represents an element with the att attribute whose value begins with the prefix "val".＼
</dd>
	<dd>
%val が空~文字列である場合、
この選択子は何も表現しない。
◎
If "val" is the empty string then the selector does not represent anything.
</dd>

	<dt><code class="css">[%att$=%val]</code></dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，その値は “接尾辞” %val で終端する
◎
Represents an element with the att attribute whose value ends with the suffix "val".＼
</dd>
	<dd>
%val が空~文字列である場合、
この選択子は何も表現しない。
◎
If "val" is the empty string then the selector does not represent anything.
</dd>

	<dt>`[%att*=%val]^css</dt>
	<dd>
次を満たす要素を表現する
⇒
%att 属性を有していて，その値は どこかに文字列 %val を包含している
◎
Represents an element with the att attribute whose value contains at least one instance of the substring "val".＼
</dd>
	<dd>
%val が空~文字列である場合、
この選択子は何も表現しない。
◎
If "val" is the empty string then the selector does not represent anything.
</dd>
</dl>

<p>
属性~値に照合される %val は、
`ident-token$t または `string-token$t
として与えられなければナラナイ。
◎
Attribute values must be &lt;ident-token&gt;s or &lt;string-token&gt;s.
</p>

<div class="example">
<p>
次の選択子は、
~HTML `object$e 要素のうち［
画像を参照しているもの
］を表現する：
◎
Examples: The following selector represents an HTML object element, referencing an image:
</p>

<pre class="lang-css">
object[`type^a^="image/"]
</pre>

<p>
次の選択子は、
~HTML `a$e 要素のうち［
`href^a 属性の値が `.html^l で終端しているもの
］を表現する：
◎
The following selector represents an HTML a element with an href attribute whose value ends with ".html".
</p>

<pre class="lang-css">
a[`href^a$=".html"]
</pre>

<p>
次の選択子は、
~HTML `p^e 要素のうち［
`title^a 属性の値が部分文字列として `hello^l を包含するもの
］を表現する：
◎
The following selector represents an HTML paragraph with a title attribute whose value contains the substring "hello"
</p>

<pre class="lang-css">
p[`title^a*="hello"]
</pre>
</div>

		</section>
		<section id="attribute-case">
<h3 title="Case-sensitivity">6.3. 属性~値の文字大小比較</h3>

<p>
既定では、
選択子の中の［
属性~名／属性~値
］の文字大小が区別されるかどうかは，文書~言語に依存する。
◎
By default case-sensitivity of attribute names and values in selectors depends on the document language.
</p>

<p>
属性~値を［
文書~言語に関わらず，`~ASCII大小無視$で照合する
］ためとして、
`属性~選択子$の閉じ角括弧 `005D^U の直前に，識別子 `0069^U を含めてもヨイ。
この~flagが在るときは、
~UAは，属性の値を`~ASCII大小無視$の下で照合するモノトスル
（すなわち， [a-z] と [A-Z] は等価と見なされる）。
◎
To match attribute values ASCII case-insensitively regardless of document language rules, the attribute selector may include the identifier i before the closing bracket (]). When this flag is present, UAs must match the attribute’s value ASCII case-insensitively (i.e. [a-z] and [A-Z] are considered equivalent).
</p>

<p>
別法として、
`属性~選択子$の閉じ角括弧 `005D^U の直前に，識別子 `0073^U を含めてもヨイ。
この事例では、
~UAは，［
文書~言語に関わらず，`一致-$するかどうか `INFRA$r の下で照合する
］モノトスル。
◎
Alternately, the attribute selector may include the identifier s before the closing bracket (]); in this case the UA must match the value case-sensitively, with “identical to” semantics [INFRA], regardless of document language rules.
</p>

<p>
他の~Selectors構文と同様に、
識別子［
`0069^U ／ `0073^U
］自体も`~ASCII大小無視$である。
◎
Like the rest of Selectors syntax, the i and s identifiers themselves are ASCII case-insensitive.
</p>

<div class="example">
<p>
次の規則は、
属性~値の文字大小が区別される~XML環境においても，
`frame^a 属性が値 `hsides^v を有するとき
— それが `hsides^l, `HSIDES^l, `hSides^l, 等々どれで表現されていようが —
~styleをあてがうことになる：
◎
The following rule will style the frame attribute when it has a value of hsides, whether that value is represented as hsides, HSIDES, hSides, etc. even in an XML environment where attribute values are case-sensitive.
</p>

<pre class="lang-css">
[`frame^a=hsides i] { border-style: solid none; }
</pre>
</div>

<div class="example">
<p>
次の規則は、
`type^a 属性の値が［
`a^l のとき, `A^l のとき
］とで異なる~styleをあてがうことになる
— ~HTMLが `type^a 属性の値を大小無視であると定義していても：
◎
The following rule will style lists with type="a" attributes differently than type="A" even though HTML defines the type attribute to be case-insensitive.
</p>

<pre class="lang-css">
[type="a" s] { list-style: lower-alpha; }
[type="A" s] { list-style: upper-alpha; }
</pre>
</div>

<p class="note">注記：
一部の文書~modelは、
大小無視とされる属性~値を構文解析-時に正規化して，［
文字列が別の文字列に文字大小区別で合致するか検査する
］ことを不可能にする。
"`s^css" ~flagを介した文字大小区別による照合がアリになるのは、
元の文字大小を保全する~systemに限られる。
◎
Note: Some document models normalize case-insensitive attribute values at parse time such that checking if a string is case-sensitive matching is impossible. Case-sensitive matching via s flags is only possible in systems that preserve the original case.
</p>

		</section>
		<section id="attrnmsp">
<h3 title="Attribute selectors and namespaces">6.4. 属性~選択子と名前空間</h3>

<p>
`属性~選択子$の中の属性~名は、
`~CSS有修飾~名$として与えられる：
◎
The attribute name in an attribute selector is given as a CSS qualified name:＼
</p>

<ul>
	<li>
属性~名には、
`宣言-済み$な名前空間~接頭辞を
— 名前空間~分離子 `007C^U で分離した上で —
前置してもヨイ。
◎
a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|).＼
</li>
	<li>
`XML-NAMES$r に倣い、
`既定の名前空間$は，属性には適用されない。
したがって、
名前空間~成分を伴わない`属性~選択子$の対象になる属性は，
どの名前空間にも属さないものに限られる
（ `|%att^css【！%attr】 と等価になる）。
◎
In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no namespace (equivalent to |attr).＼
</li>
	<li>
名前空間~接頭辞として、
~asterisk（ `*^css ）を利用してもヨイ。
これは、
属性が属する名前空間を問わず，選択子を合致させることを指示する。
◎
An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute’s namespace.
</li>
</ul>

<p>
`属性~選択子$のうち，属性~名に`宣言-済み$でない名前空間~接頭辞を伴うものは、
`無効な選択子$である。
◎
An attribute selector with an attribute name containing a namespace prefix that has not been previously declared is an invalid selector.
</p>

<div class="example">
<p>
次の~CSSにおいて：
◎
CSS examples:
</p>

<pre class="lang-css">
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue } /* 規則 1 */
[*|att] { color: yellow }     /* 規則 2 */
[|att] { color: green }       /* 規則 3 */
[att] { color: green }        /* 規則 4 */
</pre>

<p>
規則 1 は、［
`http://www.example.com^l
名前空間に属する `att^a 属性であって，値 `val^l をとるもの
］を有する要素に限り，合致することになる。
◎
The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val".
</p>

<p>
規則 2 は、
`att^a 属性を有する要素に限り
— 属性が属する名前空間を問わず
（どの名前空間にも属さないものも含め） —
合致することになる。
◎
The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace).
</p>

<p>
規則 3, 規則 4 は等価であり、どちらも［
どの名前空間にも属さない `att^a 属性
］を有する要素に限り，合致することになる。
◎
The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace.
</p>
</div>

		</section>
		<section id="def-values">
<h3 title="Default attribute values in DTDs">6.5. ~DTD内で与えられる属性の既定~値</h3>

<p>
`属性~選択子$は、
文書~treeの中の属性~値を表現する。
文書~treeがどう構築されるかは、
~Selectorsの視野から外れる。
一部の文書~形式では，~DTDや他所で属性の既定~値が定義されることもあるが、
それらは，文書~treeに現れない限り `属性~選択子$により選択されることはない。
選択子は、［
既定~値が文書~tree内で定義される【！included】か否かを問わず，働く
］ように設計されるベキである。
◎
Attribute selectors represent attribute values in the document tree. How that document tree is constructed is outside the scope of Selectors. In some document formats default attribute values can be defined in a DTD or elsewhere, but these can only be selected by attribute selectors if they appear in the document tree. Selectors should be designed so that they work whether or not the default values are included in the document tree.
</p>

<p>
例えば、
~XML~UAは，~DTDの “外部~subset” を読取ってもヨイとされているが、
`要求されてはいない^em。
一方で、
文書の “内部~subset” の中で与えられる［
属性の既定~値
］については，その~~検索が`要求されている^em。
（これらの~subsetの定義については，例えば `XML10$r を見よ。）
~DTDの外部~subsetにて定義される［
属性の既定~値
］が，文書~treeの中に現れるかどうかは、
~UAに依存する。
◎
For example, a XML UA may, but is not required to, read an “external subset” of the DTD, but is required to look for default attribute values in the document’s “internal subset”. (See, e.g., [XML10] for definitions of these subsets.) Depending on the UA, a default attribute value defined in the external subset of the DTD might or might not appear in the document tree.
</p>

<p>
~XML名前空間を認識する~UAは、［
その名前空間の知識を利用して，属性の既定~値が文書~内に在ったかのように扱ってもヨイ
］とされているが，要求されてはいない。
（例えば、
~XHTML~UAには，［
組込みの~XHTML~DTDについての知識を利用する
］ことは要求されていない。
XML 1.0 名前空間の詳細は、
例えば `XML-NAMES$r を見よ。）
◎
A UA that recognizes an XML namespace may, but is not required to use its knowledge of that namespace to treat default attribute values as if they were present in the document. (For example, an XHTML UA is not required to use its built-in knowledge of the XHTML DTD. See, e.g., [XML-NAMES] for details on namespaces in XML 1.0.)
</p>

<p class="note">注記：
実装は、
概して，外部~subsetを無視する。
これは、
~XML仕様にて定義される［
妥当性を~~検証しない処理器
］の挙動に対応する。
◎
Note: Typically, implementations choose to ignore external subsets. This corresponds to the behavior of non-validating processors as defined by the XML specification.
</p>

<div class="example">
<p>
既定~値に `decimal^l をとる `radix^a 属性を有する `EXAMPLE^e 要素を考える。
~DTD片が次の様になっているとして：
◎
Consider an element EXAMPLE with an attribute radix that has a default value of "decimal". The DTD fragment might be
</p>

<pre class="dtd-example">&lt;!ATTLIST EXAMPLE radix (decimal,octal) "decimal"&gt;
</pre>

<p>
~stylesheetが次の~CSS規則を包含する場合：
◎
If the style sheet contains the rules
</p>

<pre class="lang-css">
EXAMPLE[`radix^a=decimal] { /* <span class="comment">…既定の~prop設定…</span> */ }
EXAMPLE[`radix^a=octal]   { /* <span class="comment">…他の設定…</span> */ }
◎
EXAMPLE[radix=decimal] { /* ... default property settings ... */ }
EXAMPLE[radix=octal]   { /* ... other settings... */ }
</pre>

<p>
1 個目の規則は、
`radix^a 属性が既定を通して設定される要素
— すなわち，明示的には設定されない要素 —
には合致しないかもしれない。
すべての事例に対応するためには、
既定~値~用の`属性~選択子$を落とす必要がある：
◎
the first rule might not match elements whose radix attribute is set by default, i.e. not set explicitly. To catch all cases, the attribute selector for the default value must be dropped:
</p>

<pre class="lang-css">
EXAMPLE                { /* <span class="comment">…既定の~prop設定…</span> */ }
EXAMPLE[`radix^a=octal]   { /* <span class="comment">…他の設定…</span> */ }
◎
EXAMPLE                { /* ... default property settings ... */ }
EXAMPLE[radix=octal]   { /* ... other settings... */ }
</pre>

<p>
ここでは、
選択子
`EXAMPLE[radix=octal]^css
は，`型~選択子$のみ よりも`詳細度$が高いので、
2 個目の規則の~style宣言は，［
`radix^a 属性~値が `octal^l に等しい要素
］も対象にする 1 個目の規則を上書きすることになる。
既定の事例に限り適用される~prop宣言は、
すべて，既定でない事例に適用される~style規則で上書きされるよう，~careする必要がある。
◎
Here, because the selector EXAMPLE[radix=octal] is more specific than the type selector alone, the style declarations in the second rule will override those in the first for elements that have a radix attribute value of "octal". Care has to be taken that all property declarations that are to apply only to the default case are overridden in the non-default cases' style rules.
</p>
</div>

		</section>
		<section id="class-html">
<h3 title="Class selectors">6.6. ~class選択子</h3>

<p>
`~class選択子@
（ `class selector^en ）は［
“終止符” `002E^U, 識別子
］が成す並びとして与えられる。
それは、
識別子により識別される “~class” に`所属している^em要素を表現する†。
~classは文書~言語が定義する。
例えば `HTML$r, `SVG11$r, `MATHML$r における~classへの所属は，
`class^a 属性により与えられる：
これらの言語では、
`local^en ††な `class^a 属性に適用される `~=^css 記法
（すなわち， `[class~=%identifier]^css ）
と等価になる。
◎
The class selector is given as a full stop (. U+002E) immediately followed by an identifier. It represents an element belonging to the class identified by the identifier, as defined by the document language. For example, in [HTML5], [SVG11], and [MATHML] membership in a class is given by the class attribute: in these languages it is equivalent to the ~= notation applied to the local class attribute (i.e. [class~=identifier]).
</p>

<p class="trans-note">【†
下の例に見られるとおり，
要素は同時に複数の “~class” に所属し得る。
】【††
“`local^en” とは、
“~XML名前空間の文脈で要素に局所的”
を意味すると思われる。
】</p>

<div class="example">
<p>
~CSS例をいくつか示す：
◎
CSS examples:
</p>

<p>
次の様にすれば、
`class~="pastoral"^a を伴う† すべての要素に~style情報をアテガえる：
◎
We can assign style information to all elements with class~="pastoral" as follows:
</p>

<p class="trans-note">【†
`class^a 属性の値を成す ある~tokenは `pastoral^l に等しい
（選択子 `[class~=pastoral]^css に合致する）
】</p>

<pre class="lang-css">
*.pastoral { color: green }  /* all elements with class~=pastoral */
</pre>

<p>
または単に：
◎
or just
</p>

<pre class="lang-css">
.pastoral { color: green }  /* all elements with class~=pastoral */
</pre>

<p>
次のものは、
`class~="pastoral"^a
を伴う `h1^e 要素にのみ~styleをアテガう：
◎
The following assigns style only to H1 elements with class~="pastoral":
</p>

<pre class="lang-css">
h1.pastoral { color: green }  /* H1 elements with class~=pastoral */
</pre>

<p>
これらの規則の下では、
下の 1 個目の `h1^e 要素【！H1 instance】の~text色は `green^v にならない一方，
2 個目の `h1^e はそうなる：
◎
Given these rules, the first H1 instance below would not have green text, while the second would:
</p>

<pre class="lang-html">
&lt;h1&gt;Not green&lt;/h1&gt;
&lt;h1 class="pastoral"&gt;Very green&lt;/h1&gt;
</pre>

<p>
次の規則は、
`p^e 要素のうち，その `class^a 属性に［
`pastoral^l, `marine^l
の両方を含む，`空白$で分離された値たちが成す~list
］がアテガわれたものすべてに合致する：
◎
The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:
</p>

<pre class="lang-css">
p.pastoral.marine { color: green }
</pre>

<p>
この規則は、
`class="pastoral blue aqua marine"^a
には合致するが，
`class="pastoral blue"^a
には合致しない。
◎
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
</p>
</div>

<p class="note">注記：
~CSSは “class” 属性【~classの意味論を有する属性】に かなりの力を与えているので、
作者は，［
結付けられた呈示が ほとんどない要素
（~HTMLの `div$e や `span$e 要素など）
【および各種 “~class” 】に基づいて自前の “文書~言語” を設計した上で、
“class” 属性を通して~style情報をアテガう
］こともできるが、
この実施は避けるベキである。
文書~言語の構造上の要素は，広く［
認識された／受容された
］意味を有することが多い一方で、
作者が定義する~classはそうでないであろうから。
◎
Note: Because CSS gives considerable power to the "class" attribute, authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as div and span in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
</p>

<p class="note">注記：
【文書~言語に複数種の［ ~classの意味論を有する属性］が定義されている下で，】
要素が複数の~class属性を有する場合、
~classを探索する前に，それらの値を~spaceで連結するモノトスル。
しかしながら，現時点では、
~CSS~WG【！the working group】は，このような状況に達し得る方式があるとは~~考えていない。
したがって、
この挙動は，この仕様においては規範的とされない。
◎
Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.
</p>

<p>
`過去互換~mode$の文書に対しては、
~class名は，`~ASCII大小無視$で照合するモノトスル
— 他所における`~class選択子$は，文字大小区別であり、
~class名が`一致-$しない限り合致しない。
`INFRA$r
◎
When matching against a document which is in quirks mode, class names must be matched ASCII case-insensitively; class selectors are otherwise case-sensitive, only matching class names they are identical to. [INFRA]
</p>

		</section>
		<section id="id-selectors">
<h3 title="ID selectors">6.7. ~ID選択子</h3>

<p>
文書~言語には、
~ID型であるものと宣言された属性を包含するものもある。
~ID型の属性は、［
それを有する要素の型を問わず，同じ文書の中で
— 当の文書が文書~言語に適合する限り —
複数のそれが同じ値をとり得ない
］ことにおいて，特別である。
文書~言語が何であれ、
~ID型とされた属性は，要素を一意に識別する目的に利用できる。
~HTMLにおいては、
すべての~ID型の属性は `id^a と命名されている。
~XML~appは~ID型の属性を異なるものに命名し得るが、
同じ制約が適用される。
要素のどの属性が “~ID属性である” とされるかは，文書~言語が定義する。
◎
Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element. In HTML all ID attributes are named id; XML applications may name ID attributes differently, but the same restriction applies. Which attribute on an element is considered the “ID attribute” is defined by the document language.
</p>

<p>
`~ID選択子@
（ `ID selector^en ）は［
“番号記号” `0023^U,
~ID値
］が成す並びで記される。
~ID値は `~CSS識別子$でなければナラナイ。
 ~ID選択子は、
その中の識別子に合致する~IDを有する要素~instanceを表現する。
（適合しない文書においては、
同じ~ID選択子に複数の要素が合致することもあり得る。）
◎
An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier. An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector. (It is possible in non-conforming documents for multiple elements to match a single ID selector.)
</p>

<div class="example">
<p>
次の~ID選択子は、
`h1^e 要素のうち［
その~ID型の属性~値が `chapter1^l に等しいもの
］を表現する：
◎
Examples: The following ID selector represents an h1 element whose ID-typed attribute has the value "chapter1":
</p>

<pre class="lang-css">
h1#chapter1
</pre>

<p>
次の~ID選択子は、
すべての要素のうち［
その~ID型の属性~値が `chapter1^l に等しいもの
］を表現する：
◎
The following ID selector represents any element whose ID-typed attribute has the value "chapter1":
</p>

<pre class="lang-css">
#chapter1
</pre>

<p>
次の選択子は、
すべての要素のうち［
その~ID型の属性~値が `z98y^l に等しいもの
］を表現する：
◎
The following selector represents any element whose ID-typed attribute has the value "z98y".
</p>

<pre class="lang-css">
*#z98y
</pre>
</div>

<p class="note">注記：
XML 1.0 `XML10$rにおいては、
どの属性が要素の~IDを包含するかについての情報は，［
~DTDあるいは~schema
］内に包含される。
~UAは［
~XMLを構文解析する際に，常に~DTDを読取るとは限らない
］ので、
何が要素~IDを与えるか知り得ないこともある
（~UAは，名前空間に特有な知識を有することもあるので、
その場合，どれが当の名前空間~用の~ID属性になるか決定できるが）。
~stylesheet作者は、
そのような場合もあることが判っているか疑わしいときには，
代わりに通常の`属性~選択子$を利用するベキである
— `#p371^css の代わりに `[name=p371]^css 等々。
◎
Note: In XML 1.0 [XML10], the information about which attribute contains an element’s IDs is contained in a DTD or a schema. When parsing XML, UAs do not always read the DTD, and thus may not know what the ID of an element is (though a UA may have namespace-specific knowledge that allows it to determine which attribute is the ID attribute for that namespace). If a style sheet author knows or suspects that a UA may not know what the ID of an element is, they should use normal attribute selectors instead: [name=p371] instead of #p371.
</p>

<p>
【文書~言語にて複数種の［~IDの意味論を有する属性］が定義されている下で，】
要素が複数の~ID属性を有する場合、
~ID選択子の目的においては，それらすべてを当の要素の~IDとして扱うモノトスル。
その種の状況は［
`xml:id^a,
DOM3 Core,
~XML~DTD,
名前空間に特有な知識
］の混成により生じ得る。
◎
If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.
</p>

<p>
`過去互換~mode$の文書に対しては、
~IDは，`~ASCII大小無視$で照合するモノトスル
— 他所における`~ID選択子$は，文字大小区別であり、
~IDが`一致-$しない限り，合致しない。
`INFRA$r
◎
When matching against a document which is in quirks mode, IDs must be matched ASCII case-insensitively; ID selectors are otherwise case-sensitive, only matching IDs they are identical to. [INFRA]
</p>

		</section>
	</section>
	<section id="linguistic-pseudos">
<h2 title="Linguistic Pseudo-classes">7. 自然言語に関する疑似類</h2>

		<section id="the-dir-pseudo">
<h3 title="The Directionality Pseudo-class: :dir()">7.1. 方向性： `dir()^ps 疑似類</h3>

<p>
`dir()@ps
疑似類は、［
`文書~言語$から決定される
【`内容~言語$の】
方向性【書字~方向】に基づいて，要素を表現する選択子
］を書くことを作者に許容する。
例えば， `HTML$r は、［
`dir^a 属性, 周囲の~text, その他の要因
］の組合nに基づいて`要素の方向性を決定する方法＠~HTMLdom#the-directionality$を定義している。
別の例として，
`ITS20$r の `its:dir^a 属性や `its:dirRule^e 要素は、
`XML10$r における要素の方向性を定義-可能にする。
◎
The :dir() pseudo-class allows the author to write selectors that represent an element based on its directionality as determined by the document language. For example, [HTML5] defines how to determine the directionality of an element, based on a combination of the dir attribute, the surrounding text, and other factors. As another example, the its:dir and dirRule element of the Internationalization Tag Set [ITS20] are able to define the directionality of an element in [XML10].
</p>

<p>
`dir()$ps 疑似類による選択-は、
~style付け状態に基づかない
— 例えば， `direction$p ~propは、
その照合に影響しない。
◎
The :dir() pseudo-class does not select based on stylistic states—for example, the CSS direction property does not affect whether it matches.
</p>

<p>
疑似類 `dir(ltr)$ps0 は、
左横書き（ `left-to-right^en ）の方向性 （ `ltr^v ）を備える要素を表現する。
疑似類 `dir(rtl)$ps0 は、
右横書き（ `right-to-left^en ）の方向性 （ `rtl^v ）を備える要素を表現する。
`dir()$ps がとる引数は、
単独の識別子でなければナラナイ。
他の場合、
選択子は無効になる。
識別子と丸括弧の間に`空白$が挟まれていてもよい。
`ltr^v, `rtl^v 以外の値も無効ではないが、
【現時点では】何にも合致しない。
（将来の~markup仕様が他の種類の方向性を定義した場合、
対応する値が許容されるよう，~Selectorsも拡張されるであろう。）
◎
The pseudo-class :dir(ltr) represents an element that has a directionality of left-to-right (ltr). The pseudo-class :dir(rtl) represents an element that has a directionality of right-to-left (rtl). The argument to :dir() must be a single identifier, otherwise the selector is invalid. White space is optionally allowed between the identifier and the parentheses. Values other than ltr and rtl are not invalid, but do not match anything. (If a future markup spec defines other directionalities, then Selectors may be extended to allow corresponding values.)
</p>

<p>
`:dir(…)^css と `[dir=…]^css
の相違は、
後者が遂行する比較は，要素~上の所与の属性に限られる一方で、
`:dir(…)^css
疑似類は，比較を遂行する際に［
文書の意味論について，~UAが有する知識
］が利用されることにある。
例えば，~HTMLにおける要素の方向性は、
当の要素が `dir^a 属性を有さない場合でも，［
妥当な `dir^a 属性を有する先祖が在るならば，それらのうち最も近いもの
］に備わる方向性を継承する。
別の例として，
`[dir=auto]^css
に合致する~HTMLの要素は、
その内容から解決される方向性に依存して，
`dir(ltr)$ps0
または
`dir(rtl)$ps0
に合致することになる。
`HTML$r
◎
The difference between :dir(C) and [dir=C] is that [dir=C] only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches [dir=auto] will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]
</p>

		</section>
		<section id="the-lang-pseudo">
<h3 title="The Language Pseudo-class: :lang()">7.2. 自然言語： `lang()^ps 疑似類</h3>

<p>
文書~言語において，要素の`内容~言語$（~~自然言語, ヒトが話す言語）を決定する方法が指定されている場合、
その`内容~言語$に基づく要素を表現する選択子を書くこともアリになる。
`lang()@ps
疑似類は、
その引数として［
1 個以上の`言語~範囲$たちが成す~commaで分離された~list
］を受容し，要素のうち［
その`内容~言語$が，この~listを成す いずれかの言語~範囲に合致するもの
］を表現する。
`lang()$ps の中の各
`言語~範囲@
（ `language range^en ）は、
妥当な［
`ident$t ／ `string$t
］でなければナラナイ
（したがって、
例えば，~asteriskを包含する言語~範囲は、
正しく~escapeする（例： `:lang(\*-Latn)^css）か，
文字列として引用符で括る（例： `:lang("*-Latn")^css ）
ことが要求される【！must】。
◎
If the document language specifies how the (human) content language of an element is determined, it is possible to write selectors that represent an element based on its content language. The :lang() pseudo-class, which accepts a comma-separated list of one or more language ranges, represents an element whose content language is one of the languages listed in its argument. Each language range in :lang() must be a valid CSS &lt;ident&gt; or &lt;string&gt;. (Thus language ranges containing asterisks, for example, must be either correctly escaped or quoted as strings, e.g. :lang(\*-Latn) or :lang("*-Latn").)
</p>

<p class="note">注記：
要素の`内容~言語$は、
文書~言語が定義する。
◎
Note: The content language of an element is defined by the document language.
</p>

<p>
例えば，~HTML `HTML$r においては、
`内容~言語$は［
`lang＠~HTMLdom#attr-lang$a 属性,
`meta$e 要素からの情報,
場合によっては~protocolからの情報（例：~HTTP~headerからの）
］の組合nから決定される
【`参照＠~HTMLdom#language$】。
~XML言語 `XML10$r においては、
`xml:lang^a 属性を利用して，要素の言語~情報を指示できる。
◎
For example, in HTML [HTML5], the content language is determined by a combination of the lang attribute, information from meta elements, and possibly also the protocol (e.g. from HTTP headers). XML languages can use the xml:lang attribute to indicate language information for an element. [XML10]
</p>

<p>
要素の`内容~言語$ %言語 が`言語~範囲$ %範囲 に合致するとは、
%言語 を `BCP47$r 構文として表現する下で，
`RFC4647$r `§ 拡張d~filter法＠~RFCx/rfc4647#section-3.3.2$
による演算において %言語 が %範囲 に合致することをいう：
◎
The element’s content language matches a language range if its content language, as represented in BCP 47 syntax, matches the given language range in an extended filtering operation per [RFC4647] Matching of Language Tags (section 3.3.2).＼
</p>
<ul>
	<li>
この演算に先立って、［
%言語, %範囲
］どちらも，
`RFC5646$r `§ 言語~tagの正準-化＠~RFCx/rfc5646#section-4.5$
に従って正準-化された `extlang^P 形へ変換するモノトスル。
◎
Both the content language and the language range must be canonicalized and converted to extlang form as per section 4.5 of [RFC5646] prior to the extended filtering operation.＼
</li>
	<li>
この照合は、
~ASCII範囲の中で文字大小無視で遂行される。
◎
The matching is performed case-insensitively within the ASCII range.
</li>
	<li>
この比較を遂行する際には、
%範囲 は妥当な言語~codeである必要は無い。
◎
The language range does not need to be a valid language code to perform this comparison.
</li>
	<li>
<p>
%範囲 ~EQ 空~文字列の場合（ `:lang("")^css ）、
要素のうち言語~tagを伴わない†ものに（限り）合致することになる。
◎
A language range consisting of an empty string (:lang("")) matches (only) elements whose language is not tagged.
</p>

<p class="trans-note">【†
~HTMLにおいては、［
要素の`言語を決定-＠~HTMLdom#language$した結果 ~EQ 空~文字列
］を意味する
（要素が `lang^a 属性を有さないこととは同義でないことに注意）。
】</p>
	</li>
</ul>

<p class="note">注記：
［
文書／~protocol
］は、
`BCP47$r またはその後継版の~codeを利用して
— 当の形式が~XML `XML10$r に基づく事例では、
`xml:lang^a 属性により —
言語を指示することが推奨される。
“`FAQ： 2 文字または 3 文字の言語~code＠https://www.w3.org/International/questions/qa-lang-2or3.html$”
を見よ。
◎
Note: It is recommended that documents and protocols indicate language using codes from [BCP47] or its successor, and in the case of XML-based formats, by means of xml:lang attributes. [XML10] See “FAQ: Two-letter or three-letter language codes.”
</p>

<div class="example">
<p>
次に挙げる選択子のうち，［
1 個目はベルギー・フランス語／
2 個目はドイツ語
］で書かれた~HTML文書を表現する。
［
3 個目は 1 個目と同じ言語／
4 個目は 2 個目と同じ言語
］に属する任意な要素の子である `q$e 要素を表現する：
◎
Examples: The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.
</p>

<pre class="lang-css">
html:lang(fr-be)
html:lang(de)
:lang(fr-be) &gt; q
:lang(de) &gt; q
</pre>
</div>

<p class="note">
`:lang(%C)^css
と
`|=^css
演算子との相違は、
`|=^css
演算子が遂行する比較は，要素~上の所与の属性に限られる一方、
`:lang(%C)^css
疑似類は，比較を遂行する際に［
文書の意味論について，~UAが有する知識
］が利用されることにある。
◎
Note: One difference between :lang(C) and the |= operator is that the |= operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison.
</p>

<div class="example">
<p>
次の~HTML例では、
`[lang|=fr]^css には，（ `lang^a 属性を有する） `body$e のみが合致する一方で、
`:lang(fr)^css には `body$e と `p$e どちらも合致する
（どちらもフランス語に属するものとされるので）。
`p$e は `lang^a 属性を有さないので，
`[lang|=fr]^css
に合致しない。
◎
In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). The P does not match the [lang|=fr] because it does not have a LANG attribute.
</p>

<pre class="lang-html">
&lt;body lang=fr&gt;
  &lt;p&gt;Je suis français.&lt;/p&gt;
&lt;/body&gt;
</pre>
</div>

<div class="example">
<p>
`:lang(%C)^css と `|=^css 演算子のもう一つの相違は、
`:lang(%C)^css が暗黙的に~wildcard照合を遂行することにある。
◎
Another difference between :lang(C) and the |= operator is that :lang(C) performs implicit wildcard matching.
</p>

<p>
例えば， `:lang(de-DE)^css は、
次に挙げる すべてに合致することになる
⇒＃
`de-DE^l,
`de-DE-1996^l,
`de-Latn-DE^l,
`de-Latf-DE^l,
`de-Latn-DE-1996^l
◎
For example, :lang(de-DE) will match all of de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE, de-Latn-DE-1996,＼
</p>

<p>
一方で， `[lang|=de-DE]^css は、
これらのうち［
`de-DE^l,
`de-DE-1996^l
］のみに合致することになる。
◎
whereas of those [lang|=de-DE] will only match de-DE and de-DE-1996.
</p>

<p>
最初の下位tag（首な言語）に対しては，~wildcardによる照合を遂行させるためには、
~asteriskを利用しなければならない：
例えば， `*-CH^css は、［
`de-CH^l,
`it-CH^l,
`fr-CH^l,
`rm-CH^l
］すべてに合致することになる。
◎
To perform wildcard matching on the first subtag (the primary language), an asterisk must be used: *-CH will match all of de-CH, it-CH, fr-CH, and rm-CH.
</p>

<p>
`lang^a 属性を有する要素を対象に，`言語~範囲$を利用して照合するためには、［
`属性~選択子§, `自然言語 疑似類§
］を併用する
— 例： `[lang]:lang(de-DE)^css
◎
To select against an element’s lang attribute value using this type of language range match, use both the attribute selector and language pseudo-class together, e.g. [lang]:lang(de-DE).
</p>
</div>

<p class="note">注記：
~wildcard言語~照合と~commaで分離された~listは、
~level 4 にて新たに~~導入された。
◎
Note: Wildcard language matching and comma-separated lists are new in Level 4.
</p>

		</section>
	</section>
	<section id="location">
<h2 title="Location Pseudo-classes">8. 所在 疑似類</h2>

		<section id="the-any-link-pseudo">
<h3 title="The Hyperlink Pseudo-class: :any-link">8.1. ~hyperlink： `any-link^ps 疑似類</h3>

<p>
`any-link@ps
疑似類は、
~hyperlinkの~source~anchorとして動作する要素を表現する。
例えば `HTML$r においては、
`href$a 属性を伴う どの［
`a$e ／ `area$e
］要素も~hyperlinkであり，
`any-link$ps に合致する。
それは、［
`link$ps, `visited$ps
］いずれかに合致する要素に合致し，
`:is(:link, :visited)^css
と等価になる。
◎
The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any a or area elements with an href attribute are hyperlinks, and thus match :any-link. It matches an element if the element would match either :link or :visited, and is equivalent to :is(:link, :visited).
</p>

		</section>
		<section id="link">
<h3 title="The Link History Pseudo-classes: :link and :visited">8.2. ~link履歴： `link^ps, `visited^ps 疑似類</h3>

<p>
~UAは、
共通的に，未訪問な`~hyperlink＠#the-any-link-pseudo$を訪問-済みなそれと異なる表示にする。
~Selectorsは、
それらを判別する疑似類
`link@ps
および
`visited@ps
を供する：
◎
User agents commonly display unvisited hyperlinks differently from previously visited ones. Selectors provides the pseudo-classes :link and :visited to distinguish them:
</p>
<ul>
	<li>
`link$ps 疑似類は、
まだ訪問されてない~linkを対象にする。
◎
The :link pseudo-class applies to links that have not yet been visited.
</li>
	<li>
`visited$ps 疑似類は、
利用者により訪問-済みな~linkを対象にする。
◎
The :visited pseudo-class applies once the link has been visited by the user.
</li>
</ul>

<p>
上に挙げた 2 つの状態は両立し得ない。
◎
The two states are mutually exclusive.
</p>

<p>
~UAは、
一定期間が経過した訪問-済み~linkを未訪問な `link$ps 状態に戻してもヨイ。
◎
After some amount of time, user agents may choose to return a visited link to the (unvisited) :link state.
</p>

<p>
`visited$ps 疑似類には、
明白な~privacy含意がついて来る
— ~randomな~web~siteが［
`他の^em~web~siteのうち どれを利用者が訪問したか
］を知れるようになると、
いくつかの理由で問題になり得る。
なので、
~UAは， `visited$ps の実装において利用者の~privacyを保全する`モノトスル^em。
◎
The :visited pseudo-class comes with obvious privacy implications—​letting random websites know what other websites you’ve visited can be problematic for a number of reasons—​and so user agents must preserve user privacy in their implementation of :visited.
</p>

<div class="note">
<p>注記：
この仕様は、
この~~分野における新機軸を~UAに許容するため，［
これに関して利用者~privacyを保全する正確な方法
］を意図的に指定しない。
しかしながら、
次に挙げる~methodが示唆される：
◎
This specification intentionally does not specify exactly how to preserve user privacy in this regard, to allow for user agents to innovate in this space. The following methods are suggested, however:
</p>
<ul>
	<li>
`visited$ps には決して合致させなくする
— 代わりに，すべての~linkは `link$ps に合致させる。
◎
Have :visited never match, so all links match :link instead.
</li>
	<li>
［
所与の生成元が，どの履歴~entryを自前で観測し得たか
］を注意深く追跡して、
`visited$ps に合致する~linkを［
その訪問が当の~siteの生成元から観測-可能であったもの
］に限る。
そのためにアリな特有な~approachは、
<a href="#visited-privacy">§ `visited^ps に対し~privacyを保全する制約の例</a>
にて述べられる。
◎
Carefully track what history entries could have been observed by a given origin on their own, and only have links match :visited if that visit would have been observable from the site’s origin. A possible specific approach for this is described in Appendix C: Example Privacy-Preserving :visited Restrictions.
</li>
	<li>
生成元を問わず，~linkが `visited$ps に合致することを許容するが、［
~linkに適用できる~style
］および［
`getComputedStyle()$c の様な~styleを~queryする~APIにより返される情報
］を注意深く制約して，
~linkが［
`link$ps, `visited$ps
］どちらで~styleされたかを~siteが観測することを防止する。
（これは、
`MDN＠https://developer.mozilla.org/docs/Web/CSS/Privacy_and_the_:visited_selector$
にて文書化されており，
歴史的に~browserが~~採用していた~approachであるが、
完璧ではない
— 敵対的な~pageが履歴~情報を抽出する仕方は、
依然として，いくつかある。）
◎
Allow links to match :visited on any origin, but carefully restrict what styles they can apply and what information is returned by style-querying APIs like getComputedStyle(), to prevent sites from observing whether a link is styled with :link or :visited. (This is documented at MDN, and was the historical approach browsers took, but is not perfect; there are several ways for a hostile page to still extract history information.)
</li>
</ul>
</div>

<div class="example">
<p>
例えば，選択子 `.footnote:visited^css は、
当の~pageの利用者が以前に `.footnote^css に合致する~linkを追った場合には，
その~styleを
— 当の~linkを再び~clickする必要は無いことが利用者に知れるよう —
違えることを許容する。
◎
For example, the selector .footnote:visited would allow styling footnote links differently if they’ve been previously followed, allowing users of the page to know they might not need to click the footnote again.
</p>
</div>

		</section>
		<section id="the-local-link-pseudo">
<h3 title="The Local Link Pseudo-class: :local-link">8.3.  局所~link： `local-link^ps 疑似類</h3>

<p>
`local-link@ps
疑似類は、［
~siteの中での利用者の現在の所在に基づいて，~hyperlinkを~styleする
］ことを作者に許容する。
それは、
`any-link$ps に合致する要素のうち［
その~target~URL
— 要素による~hyperlinkの~targetの絶対~URL —
は，現在の~URL
— 要素が属する文書の~URL —
に合致するもの
］を表現する。
~target~URLが素片を含む場合、
現在の~URLの素片も照合するモノトスル
— 含まない場合、
現在の~URLの素片~部位は，この比較に織り込まないとする。
◎
The :local-link pseudo-class allows authors to style hyperlinks based on the users current location within a site. It represents an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element’s own document URL. If the hyperlink’s target includes a fragment URL, then the fragment URL of the current URL must also match; if it does not, then the fragment URL portion of the current URL is not taken into account in the comparison.
</p>

<div class="example">
<p>
例えば，次の規則は、
現在の~pageを~targetにしている~linkが~navi~list `nav^e の一部を成すときに，
下線が引かれないようにする：
◎
For example, the following rule prevents links targeting the current page from being underlined when they are part of the navigation list:
</p>

<pre class="lang-css">
nav :local-link { text-decoration: none; }
</pre>
</div>

<div class="note">
<p>注記：
~pageの現在の~URLを変化させ得るものには、
次が挙げられる：
</p>

<ul>
	<li>
利用者-動作の結果として、
同じ~pageの中で異なる素片を~targetにしている~linkが作動化されたとき
</li>
	<li>
`pushState＠~WINDOW#dom-history-pushstate$c ~APIの利用
</li>
	<li>
あるいは、
もっと明白な動作
— 異なる~pageへ~navigateしたり，~redirectに追従するなど
（［
~HTTPなどの~protocol／
`&lt;meta http-equiv="..."&gt;^c などの~markupによる指示書き／
~scriptingの指示書き
］などにより起動され得る）。
</li>
</ul>

<p>
~UAは、
そのような どの状態~変化に対しても，［
`local-link$ps ／ `target$ps ／ `target-within$ps
］疑似類が正しく応答することを確保するモノトスル。
</p>

◎
Note: The current URL of a page can change as a result of user actions such as activating a link targeting a different fragment within the same page; or by use of the pushState API; as well as by the more obvious actions of navigating to a different page or following a redirect (which could be initiated by protocols such as HTTP, markup instructions such as &lt;meta http-equiv="..."&gt;, or scripting instructions ). UAs must ensure that :local-link, as well as the :target and :target-within pseudo-classes below, respond correctly to all such changes in state.
</div>

		</section>
		<section id="the-target-pseudo">
<h3 title="The Target Pseudo-class: :target">8.4. ~target： `target^ps 疑似類</h3>

<p>
文書~言語によっては、
文書の~URLは、
文書~自体のみならず，~URLの`素片$urlを介して文書の`中の^em特定の要素を指す。
この仕方で指される要素は、
文書の~target要素とされる。
【例： `HTML$r における`~target要素＠~HTMLnav#target-element$】
◎
In some document languages, the document’s URL can further point to specific elements within the document via the URL’s fragment. The elements pointed to in this way are the target elements of the document.
</p>

<div class="example">
<p>
~HTMLにおける素片は、
~page内で同じ~IDを有する要素を指す。
例えば，~URL
`https://example.com/index.html#section2^l
は、
`https://example.com/index.html^l
に在る文書を成す要素のうち［
`id^a 属性に `section2^l を伴うもの
］【のうち最初のもの】を指す。
◎
In HTML the fragment points to the element in the page with the same ID. The url https://example.com/index.html#section2, for example, points to the element with id="section2" in the document at https://example.com/index.html.
</p>
</div>

<p>
`target@ps
疑似類は、
文書の~target要素に合致する。
文書の~URLが素片~識別子を伴わない場合、
文書には~target要素は無い。
◎
The :target pseudo-class matches the document’s target elements. If the document’s URL has no fragment identifier, then the document has no target elements.
</p>

<div class="example">
<p>
次の選択子は、
参照元~URLの~target要素であって，
`note^l ~classに属する `p^e 要素を表現する：
</p>

<pre class="lang-css">
p.note:target
</pre>
◎
p.note:target
◎
This selector represents a p element of class note that is the target element of the referring URL.
</div>

<div class="example">
<p>
次の規則たちは、
`target$ps 疑似類を利用して，
~target要素の色を `red^v にするとともに, その先頭に画像を配置する：
◎
CSS example: Here, the :target pseudo-class is used to make the target element red and place an image before it, if there is one:
</p>

<pre class="lang-css">
:target { color : red }
:target::before { content : url(target.png) }
</pre>
</div>

		</section>
		<section id="the-target-within-pseudo">
<h3 title="The Target Container Pseudo-class: :target-within">8.5. ~target容器： `target-within^ps 疑似類</h3>

<p>
`target-within@ps
疑似類は、
次を満たす要素に合致する【！適用される】
⇒
自身または［
`平坦~tree$における，その ある子孫（~text~nodeなどの非~要素~nodeも含む）
］は、［
`target$ps 疑似類に合致するための条件
］を満たす
◎
The :target-within pseudo-class applies to any element to which the :target pseudo-class applies as well as to any element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :target.
</p>

		</section>
		<section id="the-scope-pseudo">
<h3 title="The Reference Element Pseudo-class: :scope">8.6. 視野ng根： `scope^ps 疑似類</h3>

<p>
一部の文脈
— `DOM$r における `querySelector()$c ~methodを~callするときなど —
においては、
選択子は 1 個~以上の`視野ng根$に基づいて照合される。
`scope@ps
疑似類は、
この`視野ng根$を表現し，［
“真の” 要素,
“~virtualな” もの（`文書片$など）
］どちらにもなり得る。
◎
In some contexts, selectors are matched with respect to one or more scoping roots, such as when calling the querySelector() method in [DOM]. The :scope pseudo-class represents this scoping root, and may be either a true element or a virtual one (such as a DocumentFragment).
</p>

<p>
`視野ng根$が無い場合、
`scope$ps は，`根~要素$【！当の文書の根】を表現する（ `root$ps と等価になる）。
仕様は、
この疑似類が［
`根~要素$ではない，特定の要素
］に合致することを意図する場合には，
`視野ng根$（たち）を定義しなけれナラナイ。
◎
If there is no scoping root then :scope represents the root of the document (equivalent to :root). Specifications intending for this pseudo-class to match specific elements rather than the document’s root element must define their scoping root(s).
</p>

<p>
~virtualな`視野ng根$は、
`文書片$の根を表現している何らかの~objであり，
それが表現する`文書片$内の根~要素の親として動作する
【文書片に代わって，その内容が成す~node~treeの根として動作する】
— それは、
この`視野ng根$と他の要素との関係性を表現するよう，選択子~pattern内で利用できる。
~virtualな`視野ng根$は`無特能$であり，当の選択子の`~subject$にはなり得ない。
◎
A virtual scoping root is some object representing the root of a document fragment, and can be used in selector patterns to represent other elements’ relationships to this scoping root, acting as the parent of any root elements in the document fragment it represents. A virtual scoping root is featureless and cannot be the subject of the selector.
</p>

<div class="example">
<p>
例えば，所与の`文書片$ %df に対し、
%df`.querySelectorAll(":scope &gt; .foo")^c は，
すべての `.foo^css 要素のうち %df 内の “~top-level” にあるもの
（その`親$ ~EQ %df を満たすもの）に合致する。
◎
For example, if you have a DocumentFragment df, then df.querySelectorAll(":scope &gt; .foo") matches all the .foo elements that are "top-level" in the document fragment (those that have the document fragment as their parentNode).
</p>

<p>
しかしながら，
%df`.querySelector(":scope")^c に合致するものは無い
— %df は`文書片$であり，当の選択子の`~subject$になり得ないので。
◎
However, df.querySelector(":scope") will not match anything, as the document fragment itself can’t be the subject of the selector.
</p>
</div>

		</section>
	</section>
	<section id="useraction-pseudos">
<h2 title="User Action Pseudo-classes">9. 利用者~動作 疑似類</h2>

<p>
対話的な~UIは、
利用者-動作に呼応して，具現化を変更することがある。
~Selectorsは、
利用者が動作している要素を選択するためとして，数種の
`利用者~動作~疑似類@
（ `user action pseudo-class^en ）を供する。
（対話的でない~UAにおいても、
これらの`疑似類$は妥当であるが，どの要素にも決して合致しない。）
◎
Interactive user interfaces sometimes change the rendering in response to user actions. Selectors provides several user action pseudo-classes for the selection of an element the user is acting on. (In non-interactive user agents, these pseudo-classes are valid, but never match any element.)
</p>

<p>
これらの疑似類は，両立し得る。
要素は，そのような複数の疑似類に同時に合致し得る。
◎
These pseudo-classes are not mutually exclusive. An element can match several such pseudo-classes at the same time.
</p>

<div class="example">
<p>
利用者~動作~疑似類の例：
◎
Examples:
</p>

<pre class="lang-css">
a:hover   /* <span class="comment">
利用者が~link上を~hoverしている
◎
user hovers over the link
</span> */
a:focus   /* <span class="comment">
利用者が~linkに~focusしている
◎
user focuses the link
</span>     */

a:focus:hover
/* <span class="comment">
~linkが~focusされている間に，利用者が当の~link上を~hoverしている
◎
user hovers over the link while it’s focused
</span> */
</pre>
</div>

<p class="note">注記：
この節にて定義される一部の疑似類をいつ適用するか知るために必要yな接触判定については、
まだ定義されてないが，将来に定義されることになる。
◎
Note: The specifics of hit-testing, necessary to know when several of the pseudo-classes defined in this section apply, are not yet defined, but will be in the future.
</p>

		<section id="the-hover-pseudo">
<h3 title="The Pointer Hover Pseudo-class: :hover">9.1. ~pointer~hover： `hover^ps 疑似類</h3>

<p>
`hover@ps
疑似類は、［
利用者が~pointing装置で［
要素／疑似要素
］を指していて，実際に作動化させる必要はない間
］に適用される。
例えば，視覚的な~UAにおいては、
~cursor（~mouse~pointer）が［
要素により生成された`~box$
］上を~hoverしたとき，この疑似類を適用することもできる。
~hardware制限に因り（例：~pen装置），~hoverを検出できない対話的~UAは、
この機能を~supportしなくとも，`適合性§には反しない
— そのような~UAにおいては、
単純に，その種の選択子が何かに合致することは決してないことになる。
◎
The :hover pseudo-class applies while the user designates an element (or pseudo-element) with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA.
</p>

<p>
`平坦~tree$における要素の ある子孫（~text~nodeなどの非~要素~nodeも含む）が，上の条件に合致するならば、
要素も `hover$ps に合致する。
◎
An element also matches :hover if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the above conditions.
</p>

<p>
文書~言語は、
要素が `hover$ps に合致し得る追加的な仕方を定義してヨイ。
例えば `HTML$r は、
~labelが付与された~control要素は，その~labelを与えている `label$e 要素が~hoverされたとき， `hover$ps に合致するものと定義している
（`~~参照＠~HTMLselectors#selector-hover$）。
◎
Document languages may define additional ways in which an element can match :hover. For example, [HTML5] defines a labeled control element as matching :hover when its label is hovered.
</p>

<p class="note">注記：
`hover$ps の状態は、
要素の【！ 子 】子孫が~pointing装置で指されたときにも適用し得るので、
~pointing装置の直下にない要素に `hover$ps が適用されることも起こり得る。
◎
Note: Since the :hover state can apply to an element because its child is designated by a pointing device, it is possible for :hover to apply to an element that is not underneath the pointing device.
</p>

		</section>
		<section id="the-active-pseudo">
<h3 title="The Activation Pseudo-class: :active">9.2. 作動化： `active^ps 疑似類</h3>

<p>
`active@ps
疑似類は、
~host言語により定義されるとおり［
利用者により “作動化された” 要素
］に適用される。
例えば、
~hyperlinkが誘発されている間。
◎
The :active pseudo-class applies while an element is being “activated” by the user, as defined by the host language; for example, while a hyperlink is being triggered.
</p>

<p>
加えて， `active$ps 疑似類は、
~boxが~pointing装置により能動的に指示されている間にも
— それを生成した［
要素／疑似要素
］を`問わず^em —
適用される。
能動的とは、
例えば，次のようなときである
⇒＃
利用者が~mouseの首~buttonを押してから離すまでの間／
利用者の手指が~touchscreenを押している間【おそらく、一定時間以上，触れている間】。
◎
In addition, the :active pseudo-class applies while any generated box of any element (or pseudo-element) is being actively indicated by a pointing device (in the “down” state), e.g. between the time the user presses the primary mouse button and releases it, or while a finger is pressing on a touchscreen.
</p>

<p class="note">注記：
`HTML$r 【！[HTML5]】は、
`~HTML要素が作動化されるための特有な条件＠~HTMLselectors#selector-active$を定義する。
◎
Note: [HTML5] defines specific conditions for HTML elements to be activated .
</p>

<p>
`平坦~tree$における 要素のある子孫（~text~nodeなどの非~要素~nodeも含む）が，上の条件に合致するならば、
要素も `active$ps に合致する。
◎
An element also matches :active if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the above conditions.
</p>

		</section>
		<section id="the-focus-pseudo">
<h3 title="The Input Focus Pseudo-class: :focus">9.3. 入力~focus： `focus^ps 疑似類</h3>

<p>
`focus@ps
疑似類は、［
要素／疑似要素
］が~focusを得ている
（~keyboard~event, あるいは他の形による入力を受容する）
間だけ，適用される。
◎
The :focus pseudo-class applies while an element (or pseudo-element) has the focus (accepts keyboard or other forms of input).
</p>

<p>
~focusを獲得できる要素には、［
文書~言語／実装
］に特有な制限sがあり得る。
例えば `HTML$r は、
いくつかの`~focus可能な区画$を定義している。
◎
There may be document language or implementation specific limits on which elements can acquire :focus. For example, [HTML] defines a list of focusable areas.
</p>

<p>
文書~言語は、
要素が `focus$ps に合致し得る追加的な仕方を定義してヨイが、
`focus$ps 疑似類は，要素の親へ自動的には伝播しないモノトスル
— 親への合致-が欲される場合は `focus-within$ps を見よ
（他の仕組みに因り伝播される結果， `focus$ps が親~要素に適用されることはあってもよいが、
単に親であるだけでは，そうならないことに注意）。
◎
Document languages may define additional ways in which an element can match :focus, except that the :focus pseudo-class must not automatically propagate to the parent element—see :focus-within if matching on the parent is desired. (:focus may still apply to the parent element if made to propagate due to other mechanisms, but not merely due to being the parent.)
</p>

<p class="issue">
一部の作者からは、
`focus$ps が［
~form~controlから，それに結付けられた `label$e 要素へ伝播する
］ことが欲されている。
それに対する主な異議は、
実装の困難さに見受けられる。
`397$issue,
~HTMLの`課題 #1632＠~HTMLissue/1632$
を見よ。
◎
There’s a desire from authors to propagate :focus from a form control to its associated label element; the main objection seems to be implementation difficulty. See CSSWG issue (CSS) and WHATWG issue (HTML).
</p>

	</section>
		<section id="the-focus-visible-pseudo">
<h3 title="The Focus-Indicated Pseudo-class: :focus-visible">9.4. ~focus指示-先： `focus-visible^ps 疑似類</h3>

<p>
`focus$ps `疑似類$は、
常に，現在~focusを得ている要素に合致するが、
~UAが可視になるよう（ “~focus環” を描くなどにより）
`~focusを指示-@
するのは、
様々な経験則を利用して，利用者にとって最も助けになると~~決定したときに限られる。
`focus-visible@ps
疑似類は、
これらの状況に限り，~focusを得ている［
要素／疑似要素
］に合致する
— それは、
~focus指示子が`いつ^em現れるかを変更することなく，
当の~focus指示子の外観を変更することを作者に許容する。
◎
While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element (or pseudo-element) in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears.
</p>

<div class="example">
<p>
この例では、
~focus可能な どの要素も［
`focus-visible$ps に合致するときは，~~太く黄色い外形線を取得する
］ことに加え、
特に~linkは，黄色い背景も取得する。
これらの~styleは、［
~pageを全体を通して一貫する
］かつ［
~~太くされた~style付けに因り容易に可視になる
］が，［
~page~focusが どこに在るか利用者が理解する必要がある
］と見込まれない限り現れない。
◎
In this example, all focusable elements get a strong yellow outline on :focus-visible, and links get both a yellow outline and a yellow background on :focus-visible. These styles are consistent throughout the page and are easily visible due to their bold styling, but do not appear unless the user is likely to need to understand where page focus is.
</p>

<pre class="lang-css">
:root {
  --focus-gold: #ffbf47;
}

:focus-visible  {
  outline: 3px solid var(--focus-gold);
}

a:focus-visible {
  background-color: var(--focus-gold);
}
</pre>
</div>

<div class="example">
<p>
~UAは、［
現在~focusを得ている要素が，いつ`~focusを指示-$するか
］を自前の経験則により選べる。
しかしながら、
それに関して，次に挙げる（規範的でない）示唆を出発点として利用できる：
◎
User agents can choose their own heuristics for when to indicate focus; however, the following (non-normative) suggestions can be used as a starting point for when to indicate focus on the currently focused element:
</p>
<ul>
	<li>
利用者は［
可視な~focus指示子を常に見る選好
］を表出した場合
（~system選好や~browser設定を介するなどして）
⇒
他の要因に関わらず，`~focusを指示-$する
（~UAには、
作者~styleに関わらず自前の~focus指示子を示す~optionもある）。
◎
If the user has expressed a preference (such as via a system preference or a browser setting) to always see a visible focus indicator, indicate focus regardless of any other factors. (Another option may be for the user agent to show its own focus indicator regardless of author styles.)
</li>
	<li>
当の要素は~keyboard入力を~supportする場合
（ `input$e 要素~その他の［
物理的な~keyboardが無いときには、
~focusに対し~virtual~keyboardを示すよう誘発する要素
］など）
⇒
`~focusを指示-$する。
◎
If the element which supports keyboard input (such as an input element, or any other element that would triggers a virtual keyboard to be shown on focus if a physical keyboard were not present), indicate focus.
</li>
	<li>
<p>
利用者は［
~keyboardその他の~pointing装置でない何か
］を介して~pageとヤリトリしている場合
⇒
`~focusを指示-$する。
◎
If the user interacts with the page via keyboard or some other non-pointing device, indicate focus.＼
</p>

<p>
（すなわち，
当の要素が この疑似類に合致するかどうかは、
~keyboardの利用有無に応じて変化し得る
— `focus$ps には影響しない場合でも）。
◎
(This means keyboard usage may change whether this pseudo-class matches even if it doesn’t affect :focus).
</p>
	</li>
	<li>
利用者は~pointing装置（~mouse, ~touch~screen, 等々）を介して~pageとヤリトリしていて、
当の要素は~keyboard入力を~supportしない場合
⇒
`~focusを指示-$しない。
◎
If the user interacts with the page via a pointing device (mouse, touchscreen, etc.) and the focused element does not support keyboard input, don’t indicate focus.
</li>
	<li>
~scriptが~focusを移動した場合
⇒
新たに~focusを得た要素は、
それまで~focusを得ていた要素が`~focusを指示-$して
⇒＃
いたならば，`~focusを指示-$する／
いなかったならば，`~focusを指示-$しない
◎
If the previously-focused element indicated focus, and a script causes focus to move elsewhere, indicate focus on the newly focused element.
◎
Conversely, if the previously-focused element did not indicate focus, and a script causes focus to move elsewhere, don’t indicate focus on the newly focused element.
</li>
	<li>
新たに表示された要素が~focusを自動的に得るようになる場合
（新規に開いた~dialog内の動作~buttonなど）、
当の要素は，`~focusを指示-$するべきである。
◎
If a newly-displayed element automatically gains focus (such as an action button in a freshly opened dialog), that element should indicate focus.
</li>
</ul>
</div>

<p>
~UAは、
既定の~focus~styleを指定するときも `focus-visible$ps を利用するベキである
— `focus-visible^ps を利用している作者が既定の `focus$ps ~styleも不能化する必要がなくなるよう。
◎
User agents should also use :focus-visible to specify the default focus style, so that authors using :focus-visible will not also need to disable the default :focus style.
</p>

		</section>
		<section id="the-focus-within-pseudo">
<h3 title="The Focus Container Pseudo-class: :focus-within">9.5. ~focus容器： `focus-within^ps 疑似類</h3>

<p>
`focus-within@ps
疑似類は、
次を満たす［
要素／疑似要素
］に合致する【！適用される】
⇒
自身または［
`平坦~tree$における，その ある子孫（~text~nodeなどの非~要素~nodeも含む）
］は、［
`focus$ps 疑似類に合致するための条件
］を満たす
◎
The :focus-within pseudo-class applies to any element (or pseudo-element) for which the :focus pseudo-class applies, as well as to an element (or pseudo-element) whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.
</p>

		</section>
	</section>
	<section id="time-pseudos">
<h2 title="Time-dimensional Pseudo-classes">10. 時系列 疑似類</h2>

<p>
この節の疑似類は、［
現在~表示-中かどうか, あるいは何らかの時列線における作動中な期間
］に基づいて，要素を分類する。
文書を発話として具現化するときや，
~WebVTTを利用して動画を表示する間に字幕を描画するなどの用途がある。
◎
These pseudo-classes classify elements with respect to the currently-displayed or active position in some timeline, such as during speech rendering of a document, or during the display of a video using WebVTT to render subtitles.
</p>

<p>
~CSSは、
この時列線を定義しない。
それは~host言語が定義しなければナラナイ。
これらの疑似類は、
時列線が定義されていない要素には合致しないモノトスル。
◎
CSS does not define this timeline; the host language must do so. If there is no timeline defined for an element, these pseudo-classes must not match the element.
</p>

<p class="note">注記：
`current$ps 要素の先祖もまた `current$ps になるが、
`future$ps 要素の先祖も `future$ps になる必要はない。
所与の要素は、
少なくとも［
`current$ps, `past$ps, `future$ps
］のうちいずれかに合致する。
◎
Note: Ancestors of a :current element are also :current, but ancestors of a :past or :future element are not necessarily :past or :future as well. A given element matches at most one of :current, :past, or :future.
</p>

		<section id="the-current-pseudo">
<h3 title="The Current-element Pseudo-class: :current">10.1. 現在-要素： `current^ps 疑似類</h3>

<p>
`current@ps
疑似類は、
次に該当する要素を表現する
⇒
現在~表示されている要素, または【および？】その先祖である
◎
The :current pseudo-class represents the element, or an ancestor of the element, that is currently being displayed.
</p>

<p>
関数-形の
`current()@ps
疑似類もあり、
`複合-選択子$たちが`成す~list$を引数にとる。
この場合、
%E を `current$ps 要素とするとき， %E が引数にも合致するならば %E 自身を表現し、
合致しない場合は［
%E の先祖であって, 引数に合致する要素のうち %E に最も近い先祖
］を表現する（どれにも合致しない場合は何も表現しない）。
◎
Its alternate form :current() takes a list of compound selectors as its argument: it represents the :current element that matches the argument or, if that does not match, the innermost ancestor of the :current element that does. (If neither the :current element nor its ancestors match the argument, then the selector does not represent anything.)
</p>

<p class="trans-note">【
`current$ps 要素
— 例えば `elem:current(…)^css
の様に記されているとき，“最も近い先祖” は `elem^css 型でもなければならないのか？
それとも `elem^css 型の `current^ps 要素の先祖のうち引数に合致するような “最も近い先祖” なのかどっち？
】</p>

<div class="example">
<p>
例えば 次の規則は、
文書を発話として具現化するときに，読み上げられる段落, または~list~itemを強調することになる：
◎
For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:
</p>

<pre class="lang-css">
:current(p, li, dt, dd) {
  background: yellow;
}
</pre>
</div>

		</section>
		<section id="the-past-pseudo">
<h3 title="The Past-element Pseudo-class: :past">10.2. 過去-要素： `past^ps 疑似類</h3>

<p>
`past@ps
疑似類は、
次に該当する要素を表現する
⇒
要素~全体が `current$ps 要素より先に生じるものと定義されているもの。
例えば、
~WebVTT仕様は，
`past$ps 疑似類を
【！http://dev.w3.org/html5/webvtt/】
`~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。
◎
The :past pseudo-class represents any element that is defined to occur entirely prior to a :current element.＼
For example, the WebVTT spec defines the :past pseudo-class relative to the current playback position of a media element.＼
</p>

<p>
文書~言語に要素の時系列順が定義されていない場合、
これは `current$ps 要素に先行するすべての同胞~要素を表現する。
◎
If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) previous sibling of a :current element.
</p>

		</section>
		<section id="the-future-pseudo">
<h3 title="The Future-element Pseudo-class: :future">10.3. 未来-要素： `future^ps 疑似類</h3>

<p>
`future@ps
疑似類は、
次に該当する要素を表現する
⇒
要素~全体が `current$ps 要素より後に生じるものと定義されているもの。
例えば、
~WebVTT仕様は，
`future$ps 疑似類を
`~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。
◎
The :future pseudo-class represents any element that is defined to occur entirely after a :current element.＼
For example, the WebVTT spec defines the :future pseudo-class relative to the current playback position of a media element.＼
</p>

<p>
文書~言語により要素の時系列順が定義されていない場合、
これは `current$ps 要素に後続するすべての同胞~要素を表現する。
◎
If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) next sibling of a :current element.
</p>

		</section>
	</section>
	<section id="resource-pseudos">
<h2 title="Resource State Pseudo-classes">11. 資源~状態 疑似類</h2>

<p>
この節の疑似類は、
特に画像や動画【／音声】など，読込まれた資源を表現する要素に適用され、
それらを［
それらの状態の何らかの性質に基づいて選択する
］ことを作者に許容する。
◎
The pseudo-classes in this section apply to elements that represent loaded resources, particularly images/videos, and allow authors to select them based on some quality of their state.
</p>

		<section id="video-state">
<h3 title="Media Playback State: the :playing, :paused, and :seeking pseudo-classes">11.1. ~media再生-状態： `playing^ps, `paused^ps, `seeking^ps 疑似類</h3>

<p>
`playing@ps
疑似類は、
次に該当する要素を表現する
⇒
［
“再生する”, “静止する”
］能力を有していて， “再生している” もの
（これには、
明示的に “再生されている” 状態の他にも，［
“~bufferしている”, “停滞した”
］など、［
利用者の意図によらない何らかの事由
］で一時的に停止されていて，［
その事由が解決された時点で自動的に再開する状態
］も含まれる。）
◎
The :playing pseudo-class represents an element that is capable of being “played” or “paused”, when that element is “playing”. (This includes both when the element is explicitly playing, and when it’s temporarily stopped for some reason not connected to user intent, but will automatically resume when that reason is resolved, such as a “buffering” or “stalled” state.)
</p>

<p>
`paused@ps
疑似類は、
次に該当する要素を表現する
⇒
［
“再生する”, “静止する”
］能力を有していて， “静止している” もの
（これには、
明示的に “静止された” 状態の他にも，［
“読込まれたが、
まだ作動化されていない” ことにより，再生していない状態
］も含まれる）。
◎
The :paused pseudo-class represents an element that is capable of being “played” or “paused”, when that element is “paused” (i.e. not ”playing”). (This includes both an explicit “paused” state, and other non-playing states like “loaded, hasn’t been activated yet”, etc.)
</p>

<p>
`seeking@ps
疑似類は、
次に該当する要素を表現する
⇒
“~seekする” 能力を有していて，~seekしているもの。
（ ~HTMLの［
`audio$e ／ `video$e
］要素に対しては、
`HTML$r `§ ~seek法＠~HEmedia#seeking$ を見よ。）
◎
The :seeking pseudo-class represents an element that is capable of ”seeking” when that element is ”seeking”. (For the audio and video elements of HTML, see HTML § 4.8.11.9 Seeking.)
</p>

		</section>
		<section id="media-loading-state">
<h3 title="Media Loading State: the :buffering and :stalled pseudo-classes">11.2. ~media読込ng状態： `buffering^ps, `stalled^ps 疑似類</h3>

<p>
`buffering@ps
疑似類は、
次に該当する要素を表現する
⇒
［
“再生する”, “静止する”
］能力を有していて，`~media~data$を得するよう能動的に試みているが、
再生を再開するに十分な~dataを得していないので，再生し続けられないもの。
（要素は、
“~bufferしている” ときでも，
“再生している” ものと見なされることに注意。
`buffering$ps に合致する要素は `playing$ps にも合致する。）
◎
The :buffering pseudo-class represents an element that is capable of being “played” or “paused”, when that element cannot continue playing because it is actively attempting to obtain media data but has not yet obtained enough data to resume playback. (Note that the element is still considered to be “playing” when it is “buffering”. Whenever :buffering matches an element, :playing also matches the element.)
</p>

<p>
`stalled@ps
疑似類は、
次に該当する要素を表現する
⇒
“再生する” 能力を有していて，
`~media~data$を得するよう能動的に試みているが、
ある量の時間~内に~dataを受信するのに失敗したので，再生し続けられないもの。
（~HTMLの［
`audio$e ／ `video$e
］要素に対しては、
この時間~量は
`~media要素の停滞-制限時間$と称される
`HTML$r
。）
（ `buffering$ps 疑似類と同様に，要素は、
“停滞している” ときでも，
“再生している” ものと見なされることに注意。
`stalled$ps に合致する要素は `playing$ps にも合致する。）
◎
The :stalled pseudo-class represents an element when that element cannot continue playing because it is actively attempting to obtain media data but it has failed to receive any data for some amount of time. For the audio and video elements of HTML, this amount of time is the media element stall timeout. [HTML] (Note that, like with the :buffering pseudo-class, the element is still considered to be “playing” when it is “stalled”. Whenever :stalled matches an element, :playing also matches the element.)
</p>

		</section>
		<section id="sound-state">
<h3 title="Sound State: the :muted and :volume-locked pseudo-classes">11.3. 音響~状態： `muted^ps, `volume-locked^ps 疑似類</h3>

<p>
`muted@ps
疑似類は、
次に該当する要素を表現する
⇒
音響を鳴らす能力を有しているが、
現在 “消音されて” 【！(forced silent)】いるもの。
（~HTMLの［
`audio$e ／ `video$e
］要素~用には、
`消音-＠~HEmedia#concept-media-muted$ `HTML$r
を見よ。）
◎
The :muted pseudo-class represents an element that is capable of making sound, but is currently “muted“ (forced silent). (For the audio and video elements of HTML, see muted. [HTML])
</p>

<p>
`volume-locked@ps
疑似類は、
次に該当する要素を表現する
⇒
音響を鳴らす能力を有しているが、
現在は［
~UA／利用者
］により音量は “~lockされて” いるので，~page作者は それを変更できないもの。
（~HTMLの［
`audio$e ／ `video$e
］要素~用には，要素の`実効~media音量$を設定する~algo `HTML$r を見よ。）
◎
The :volume-locked pseudo-class represents an element that is capable of making sound, and currently has its volume "locked" by the UA or the user, so the page author cannot change it. (For the audio and video elements of HTML, see the algorithm for setting the element’s effective media volume. [HTML])
</p>

		</section>
	</section>
	<section id="display-state-pseudos">
<h2 title="Element Display State Pseudo-classes">12. 要素~表示~状態 疑似類</h2>

		<section id="open-state">
<h3 title="Collapse State: the :open pseudo-class">12.1. 開閉~状態： `open^ps 疑似類</h3>

<p>
`open@ps
疑似類は、
次に該当する要素を表現する
⇒
［
“開な”, “閉な”
］両~状態をとり得るが，
現在は “開な” 状態にあるもの。
◎
The :open pseudo-class represents an element that has both “open” and “closed” states, and which is currently in the “open” state.
</p>

<p>
［
“開な”, “閉な”
］が正確に何を意味するかは，~host言語に特有であるが、
例えば，~HTMLの［
`details$e, `select$e, `dialog$e, `input$e
］などの要素は、
もっと内容を表示するよう “開な” 状態に~toggleされ得る
（ `dialog$e の事例では、
内容~すべてが，表示されるかされないか）。
◎
Exactly what “open” and “closed” mean is host-language specific, but exemplified by elements such as HTML’s details, select, dialog, and input elements, all of which can be toggled “open” to display more content (or any content at all, in the case of dialog).
</p>

<p class="note">注記：
［
“開な” ／ “閉な”
］は、
意味論上の状態である。
現在~表示されてない要素
（例：
`visibility$p が `collapse^v にされたもの／
`display$p が `none^v にされた下位treeに属するもの）
であっても、
“開な” 状態になり得る
— その場合、
`open$ps に合致することになる。
◎
Note: Being “open” or “closed” is a semantic state. An element not currently being displayed (for example, one that has visibility: collapse, or belongs to a display: none subtree) can still be “open” and will match :open.
</p>

<p class="note">注記：
将来には、
`closed^ps 疑似類が追加されるかもしれない
— `open$ps を~supportするものたちが成す全部的な集合が既知になったなら。
◎
Note: A ":closed" pseudo-class might be added in the future once the full set of things that support :open is known.
</p>

		</section>
		<section id="popover-open-state">
<h3 title="Popover State: the :popover-open pseudo-class">12.2. ~popover状態： `popover-open^ps 疑似類</h3>

<p>
`popover-open@ps
疑似類は、
次に該当する要素を表現する
⇒
［
“~popoverを示している”, “~popoverを隠している”
］両~状態をとり得るが，
現在は “~popoverを示している” 状態にあるもの。
◎
The :popover-open pseudo-class represents an element that has both “popover-showing” and “popover-hidden” states and which is currently in the “popover-showing” state.
</p>

<p class="note">注記：
これは、
`open$ps とは別個である
— 要素は、
自身に特有な［
“開な”, “閉な”
］状態をとり得ると同時に，別々な
— ~popoverであることに結付けられた —
［
“~popoverを示している”, “~popoverを隠している”
］状態もとり得るので。
◎
Note: This is distinct from :open because an element can have element-specific open and closed states and also have separate popover-showing and popover-hidden states associated with being a popover.
</p>

<p>
［
“~popoverを示している”, “~popoverを隠している”
］状態が正確に何を意味するかは，~host言語に特有であるが、
例として，［
~HTMLの `popover$a 属性, それに結付けられた`~popover可視性~状態$
］が挙げられる。
◎
Exactly what “popover-showing” and “popover-hidden” states mean is host-language specific, but is exemplified by the presence of the HTML popover attribute and the associated popover visibility state.
</p>

		</section>
		<section id="modal-state">
<h3 title="Modal (Exclusive Interaction) State: the :modal pseudo-class">12.3. ~modal（排他的なヤリトリ）状態： `modal^ps 疑似類</h3>

<p>
`modal@ps
疑似類は、
次に該当する要素を表現する
⇒
要素が退けられるまでは、
要素の外側における すべてのヤリトリを除外する状態にある。
◎
The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed.＼
</p>

<p>
`modal$ps には複数の要素が同時に合致し得るが、
作動中にある（入力を受取れる）ものは，それらのうち 1 つに限られる。
◎
Multiple elements can be :modal simultaneously, with only one of them active (able to receive input).
</p>

<div class="example">
<ul>
	<li>
`dialog$e 要素は、
`showModal()＠~HEinteractive#dom-dialog-showmodal$c ~APIで開かれたとき，
`modal$ps に合致する。
</li>
	<li>
`fullscreen$ps に合致する要素は、
`requestFullscreen()＠~FULLSCREEN#dom-element-requestfullscreen$c ~APIで開かれたとき，
`modal$ps に合致する
— これは、
当の~pageを成す残りの部分とのヤリトリを防止するので。
</li>
</ul>
◎
For example, the dialog element is :modal when opened with the showModal() API. Similarly, a :fullscreen element is also :modal when opened with the requestFullscreen() API, since this prevents interaction with the rest of the page.
</div>

		</section>
		<section id="fullscreen-state">
<h3 title="Fullscreen Presentation State: the :fullscreen pseudo-class">12.4. ~fullscreen呈示~状態： `fullscreen^ps 疑似類</h3>

<p>
`fullscreen@ps
疑似類は、
次に該当する要素を表現する
⇒
要素は，~screenのほとんど（通例的には すべて）を占める~modeで表示されている
— 例えば、
`FULLSCREEN$r ~APIにて定義されるものなど。
◎
The :fullscreen pseudo-class represents an element which is displayed in a mode that takes up most (usually all) of the screen, such as that defined by the Fullscreen API. [FULLSCREEN]
</p>

		</section>
		<section id="pip-state">
<h3 title="Picture-in-Picture Presentation State: the :picture-in-picture pseudo-class">12.5. ~picture-in-picture呈示~状態： `picture-in-picture^ps 疑似類</h3>

<p>
`picture-in-picture@ps
疑似類は、
次に該当する要素を表現する
⇒
要素は，表示域のほとんど（通例的には すべて）を占める~modeで表示されていて、
要素が他の内容~越しに表示されている間，
表示域は~screenの一部に限定されている
— 例えば、
`picture-in-picture$r ~API を利用しているとき。
◎
The :picture-in-picture pseudo-class represents an element which is displayed in a mode that takes up most (usually all) of the viewport, and whose viewport is confined to part of the screen while being displayed over other content, for example when using the Picture-in-Picture API. [picture-in-picture]
</p>

		</section>
	</section>
	<section id="input-pseudos">
<h2 title="The Input Pseudo-classes">13. 入力 疑似類</h2>

<p>
この節の疑似類のほとんどは、
~HTMLの `input$e 要素など，利用者からの入力をとる要素を対象にする。
◎
The pseudo-classes in this section mostly apply to elements that take user input, such as HTML’s input element.
</p>

		<section id="input-states">
<h3 title="Input Control States">13.1. 入力~controlの状態</h3>

			<section id="enableddisabled">
<h4 title="The :enabled and :disabled Pseudo-classes">13.1.1. 操作可否： `enabled^ps, `disabled^ps 疑似類</h4>

<p>
［
`enabled@ps
／
`disabled@ps
］疑似類は、［
可能化-／不能化-
］された~UI要素を表現する。
その種の要素は、
対応する［
不能化／可能化
］状態も備えるモノトスル。
◎
The :enabled pseudo-class represents user interface elements that are in an enabled state; such elements must have a corresponding disabled state.
◎
Conversely, the :disabled pseudo-class represents user interface elements that are in a disabled state; such elements must have a corresponding enabled state.
</p>

<p>
何が~UI要素とされ，何が［
可能化／不能化
］状態を成すかは、
~host言語に依存する。
大概の文書では、
ほとんどの要素は［
`enabled$ps ／ `disabled$ps
］の対象にならない。
例えば `HTML$r では、
対話的な要素のうち，不能化されていないものが `enabled^ps であるとされ
（`~~参照＠~HTMLselectors#selector-enabled$），
明示的に不能化されている要素が `disabled^ps であるとされている
（`~~参照＠~HTMLselectors#selector-disabled$）。
◎
What constitutes an enabled state, a disabled state, and a user interface element is host-language-dependent. In a typical document most elements will be neither :enabled nor :disabled. For example, [HTML5] defines non-disabled interactive elements to be :enabled, and any such elements that are explicitly disabled to be :disabled.
</p>

<p class="note">注記：
利用者が所与の~UI要素とヤリトリできるかどうかに影響する~CSS~propは、
それが［
`enabled$ps ／ `disabled$ps
］に合致するかどうかに影響しない。
例えば， `display$p や `visibility$p ~propには、
要素の［
可能化／不能化
］の状態に対する効果は無い。
◎
Note: CSS properties that might affect a user’s ability to interact with a given user interface element do not affect whether it matches :enabled or :disabled; e.g., the display and visibility properties have no effect on the enabled/disabled state of an element.
</p>

			</section>
			<section id="rw-pseudos">
<h4 title="The Mutability Pseudo-classes: :read-only and :read-write">13.1.2. 変異能： `read-only^ps, `read-write^ps 疑似類</h4>

<p>
`read-write@ps
は、
文書~言語により［
利用者が内容を改めれる
］ものと定義される要素に合致する。
他のものは、
`read-only@ps
に合致する。
◎
An element matches :read-write if it is user-alterable, as defined by the document language. Otherwise, it is :read-only.
</p>

<div>
<p>
例えば， `HTML$r においては、
次に挙げるものが `read-write^ps であるとされる
（`~~参照＠~HTMLselectors#selector-read-write$）：
</p>
<ul>
	<li>
`input$e 要素のうち，次を満たすもの
⇒
［
不能化されていない
］~AND［
読専でない
］
</li>
	<li>
次を満たす要素
⇒
`contenteditable＠~HTMLinteraction#attr-contenteditable$a 属性の状態 ~EQ `true＠~HTMLinteraction#attr-contenteditable-true-state$st
</li>
</ul>
◎
For example, in [HTML5] a non-disabled non-readonly &lt;input&gt; element is :read-write, as is any element with the contenteditable attribute set to the true state.
</div>

			</section>
			<section id="placeholder">
<h4 title="The Placeholder-shown Pseudo-class: :placeholder-shown">13.1.3. 仮入力例示： `placeholder-shown^ps 疑似類</h4>

<p>
入力~要素は、
利用者~向けの~hintとして仮入力~textを例示することがある。
例えば， `HTML$r の `placeholder^a 属性
（`~~参照＠~HTMLselectors#selector-placeholder-shown$）。
`placeholder-shown@ps
疑似類は、
そのような仮入力~text
— ~DOM内の属性や要素から与えられているか，あるいは~UAにより黙示される~text —
を例示している入力~要素に合致する。
◎
Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in [HTML5]. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text, whether that text is given by an attribute or a real element, or is otherwise implied by the UA.
</p>

<p class="example">
例えば，［
`input$e ／ `textarea$e
］要素~上の `placeholder^a 属性は、
`HTML$r の意味論に則って，仮入力~textを供する。
したがって `placeholder-shown^ps 疑似類は、
そのような仮入力~textが示されているときに適用される。
◎
For example, according to the semantics of [HTML] the placeholder attribute on the input and textarea elements provide placeholder text. The :placeholder-shown class thus applies whenever such placeholder text is shown.
</p>

			</section>
			<section id="autofill">
<h4 title="The Automatic Input Pseudo-class: :autofill">13.1.4. 自動的~入力： `autofill^ps 疑似類</h4>

<p>
`autofill@ps
疑似類は、
~UAにより自動的に埋められる入力~要素のうち，
後続して利用者により改められてないものを表現する。
◎
The :autofill pseudo-class represents input elements that have been automatically filled by the user agent, and have not been subsequently altered by the user.
</p>

			</section>
			<section id="the-default-pseudo">
<h4 title="The Default-option Pseudo-class: :default">13.1.5. 既定の~option： `default^ps 疑似類</h4>

<p>
`default@ps
疑似類は、
~UI要素のうち［
一連の類似な要素の中で，既定の選択肢にされたもの（たち）
］を対象にする。
概して，［
文脈~menu~item,
~button,
~select~list,
~select~menu
］が対象になる。
◎
The :default pseudo-class applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons and select lists/menus.
</p>

<p>
例えば、
一連の~buttonの中の既定の提出-~buttonや,
~popup~menuの中の既定の~optionなど。
多数の選択肢がある~groupの中では【！ (such as for pizza toppings)】，複数の要素が `default$ps に合致し得る。
例えば， `HTML$r においては、
次に挙げるものが `default$ps に合致するものと定義されている
（`~~参照＠~HTMLselectors#selector-default$）
⇒＃
~formの中の “既定の” ~button,
`select$e 要素のうち初期~時に選択-済みな `option$e 要素（複数も可）,
その他の少数の要素
◎
One example is the default submit button among a set of buttons. Another example is the default option from a popup menu. In a select-many group (such as for pizza toppings), multiple elements can match :default. For example, [HTML5] defines that :default matches the “default button” in a form, the initially-selected &lt;option&gt;(s) in a &lt;select&gt;, and a few other elements.
</p>
			</section>
		</section>
		<section id="input-value-states">
<h3 title="Input Value States">13.2. 入力~値の状態</h3>

			<section id="checked">
<h4 title="The Selected-option Pseudo-class: :checked">13.2.1. 選択-済み~option： `checked^ps 疑似類</h4>

<p>
~radio~buttonや~checkboxは、
利用者により~toggleされ得る。
また，一部の~menu~itemは、
利用者がそれを選択したとき “~checkされた状態” になる。
その種の要素は、
“~on” に~toggleされたとき
`checked@ps
疑似類の対象になる。
例えば， `HTML$r においては、
次に挙げるものが `checked^ps に合致するものと定義されている
（`~~参照＠~HTMLselectors#selector-checked$）
⇒＃
~checkされた~checkbox,
~checkされた~radio~button,
選択された `option$e 要素
◎
Radio and checkbox elements can be toggled by the user. Some menu items are “checked” when the user selects them. When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML5] defines that checked checkboxes, radio buttons, and selected &lt;option&gt; elements match :checked.
</p>

<p>
`checked$ps 疑似類は生来的に動的であり，利用者-動作により改められ得るものであるが、
文書~内に意味論上の属性
（ `HTML$r の［
`selected＠~HEforms#attr-option-selected$a,
`checked＠~HEinput#attr-input-checked$a
］属性など）
が在るか否かに基づくものでもあるので，【静的~媒体も含む】すべての媒体に適用される。
◎
While the :checked pseudo-class is dynamic in nature, and can altered by user action, since it can also be based on the presence of semantic attributes in the document (such as the selected and checked attributes in [HTML5]), it applies to all media.
</p>

<div class="example">
<p>
否定~疑似類を利用すれば、
~checkされていない~checkboxも選択できる：
◎
An unchecked checkbox can be selected by using the negation pseudo-class:
</p>

<pre class="lang-css">
input[type=checkbox]:not(:checked)
</pre>
</div>

			</section>
			<section id="indeterminate">
<h4 title="The Indeterminate-value Pseudo-class: :indeterminate">13.2.2. 不定な値： `indeterminate^ps 疑似類</h4>

<p>
`indeterminate@ps
疑似類は、
値が不定~状態にある~UI要素を対象にする。
例えば，［
~radio~button／~checkbox
］は、
~checkの有無が~toggleされ得るが，
そのどちらでもない不定~状態をとることもある。
類似に，進捗計は、
完了~~率が未知なとき，不定~状態をとり得る。
例えば `HTML$r は、
~checkboxが どのようなとき `indeterminate^ps に合致するかを定義する
（`~~参照＠~HTMLselectors#selector-indeterminate$）。
◎
The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown. For example, [HTML5] defines how checkboxes can be made to match :indeterminate.
</p>

<p>
`checked$ps 疑似類と同様に、
`indeterminate$ps も すべての媒体に適用される。
例えば，初期~時に選択-済みなものがない~radio~groupを成す各~部品は、
静的~表示の下でも `indeterminate$ps に合致する。
◎
Like the :checked pseudo-class, :indeterminate applies to all media. Components of a radio-group initialized with no pre-selected choice, for example, would be :indeterminate even in a static display.
</p>

			</section>
		</section>
		<section id="ui-validity">
<h3 title="Input Value-checking">13.3. 入力~値の検査-法</h3>

			<section id="blank">
<h4 title="The Empty-Value Pseudo-class: :blank">13.3.1. 空な値： `blank^ps 疑似類</h4>

<p>
`blank@ps
疑似類は、
利用者~入力~要素のうち，入力~値は空であるもの
（入力が空~文字列あるいは “無い” もの）
に適用される。
◎
The :blank pseudo-class applies to user-input elements whose input value is empty (consists of the empty string or otherwise null input).
</p>

<div class="note">
<p>注記：
大雑把に言えば、
ヒトが印刷された~formを見て空欄と~~認識する場合，
それは `blank$ps に合致する。
◎
Roughly speaking, if a human looked at a printout of the form and would say it’s blank, it matches :blank.
</p>

<p>
~form~controlに対し `blank$ps を解釈する~~経験則として，次が挙げられる：
◎
A rule of thumb for interpreting :blank on form controls is:
</p>

<ul>
	<li>
当の~controlは 常に提出されるものであって，
空~文字列を伴って提出されることになる場合、
`blank$ps に合致する。
（例：~HTMLにおける［
`Text$st 状態にある `input$e 要素
］のうち，その値が空なもの。）
◎
If the control always submits, and would do so with an empty string, it matches :blank. (Such as HTML’s &lt;input type=text&gt; when its value is empty.)
</li>
	<li>
当の~controlは ときには提出されるものであって，
提出しないよう設定されている場合、
`blank$ps に合致する。
（例：~HTMLにおける［
`Checkbox$st 状態にある `input$e 要素
］のうち，~checkされてないもの。）
◎
If it sometimes submits, and is set to not submit, it matches :blank. (Such as HTML’s &lt;input type=checkbox&gt; when not checked.)
</li>
	<li>
当の~controlは “動作~button” である場合
（状態を表現する “~toggle~button” ではなく）、
`blank$ps には決して合致しない
（例： `button$e 要素, `Submit$st 状態にある `input$e 要素, 等々）。
◎
If it’s an “action button” (rather than a “toggle button” that represents a state) such as &lt;button&gt;, &lt;input type=submit&gt;, etc., it never matches :blank.
</li>
</ul>

<p>
`~host言語$は、
各種~form~controlが いつ `blank$ps 合致するかについて，
もっと精確な規則を指定し得る。
◎
Host languages can specify more precise rules for when form controls match :blank.
</p>
</div>

<p class="note">注記：
この選択子は~risk下にある。
◎
Note: This selector is at-risk.
</p>

			</section>
			<section id="validity-pseudos">
<h4 title="The Validity Pseudo-classes: :valid and :invalid">13.3.2. 妥当性： `valid^ps, `invalid^ps 疑似類</h4>

<p>
要素は，その内容や値【概ね，入力された値】が`文書~言語$
（例： `XFORMS11$r や `HTML$r ）
が定義する~data妥当性~意味論に則って 妥当であるかどうかに従って，
`valid@ps
（妥当である）／
`invalid@ps
（妥当でない）
とされる。
~data妥当性~意味論を欠く要素は、
これらの疑似類の対象にならない。
◎
An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML5]). An element which lacks data validity semantics is neither :valid nor :invalid.
</p>

<p class="note">注記：
［
拘束がないことから，常に `valid$ps になる要素
］と［
~data妥当性~意味論をまったく備えないことから，
`valid$ps にも `invalid$ps にもならない要素
］は、
別物であることに注意。
例えば~HTMLにおいては、
`Text$st 状態にある `input$e 要素は，拘束がないものになり得るが、
`p$e 要素は，~data妥当性~意味論を備えないので これらの疑似類に合致することは決してない。
◎
Note: There is a difference between an element which has no constraints, and thus would always be :valid, and one which has no data validity semantics at all, and thus is neither :valid nor :invalid. In HTML, for example, an &lt;input type="text"&gt; element may have no constraints, but a p element has no validity semantics at all, and so it never matches either of these pseudo-classes.
</p>

			</section>
			<section id="range-pseudos">
<h4 title="The Range Pseudo-classes: :in-range and :out-of-range">13.3.3. 範囲： `in-range^ps, `out-of-range^ps 疑似類</h4>

<p>
［
`in-range@ps
／
`out-of-range@ps
］疑似類が適用されるのは、
範囲に制限がある要素に限られる。
要素は、［
自身に束縛されている値
］が［
文書~言語が定義する範囲
］に［
入るならば `in-range$ps ／
入らないならば `out-of-range$ps
］に合致する。
［
~data範囲が制限されない要素／~form~controlでない要素
］は、
これらの疑似類の対象にならない。
◎
The :in-range and :out-of-range pseudo-classes apply only to elements that have range limitations. An element is :in-range or :out-of-range when the value that the element is bound to is in range or out of range with respect to its range limits as defined by the document language. An element that lacks data range limits or is not a form control is neither :in-range nor :out-of-range.＼
</p>

<div class="example">
<p>
例えば，次のような要素は、
`out-of-range$ps になる：
</p>
<ul>
	<li>
1 から 10 までの値のみを表現する~slider~controlとして呈示されている `slider^e 要素の値が 11 であるとき。
</li>
	<li>
選択肢として［
"A", "B", "C"
］のみが在る~popup~menuとして呈示されている `menu$e 要素の値が "E" であるとき。
</li>
</ul>
◎
E.g. a slider element with a value of 11 presented as a slider control that only represents the values from 1-10 is :out-of-range. Another example is a menu element with a value of "E" that happens to be presented in a popup menu that only has choices "A", "B" and "C".
</div>

			</section>
			<section id="opt-pseudos">
<h4 title="The Optionality Pseudo-classes: :required and :optional">13.3.4. 必須随意： `required^ps, `optional^ps 疑似類</h4>

<p>
~form要素【~form部品の総称】は、
それが属する~formが妥当なものとして提出-可能になるために，その値が［
必須（ `required^en ）なのか／随意（ `optional^en ）なのか
］に応じて［
`required@ps
／
`optional@ps
］の対象になる。
~form要素でない要素は、
これらの対象にならない。
◎
A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to can be validly submitted. Elements that are not form elements are neither required nor optional.
</p>

<p class="trans-note">【
文面からは、［
~HTML `form$e 要素の外にある `input$e 要素などの~form部品は，
“~form要素でない”
］かのようにも解釈できそうだが，
そうでもないようだ
（`~HTML仕様の該当する記述＠~HTMLselectors#selector-required$）。
】</p>

			</section>
			<section id="user-pseudos">
<h4 title="The User-interaction Pseudo-classes: :user-valid and :user-invalid">13.3.5. 利用者~対話： `user-valid^ps, `user-invalid^ps 疑似類</h4>

<p>
［
`user-invalid@ps
／
`user-valid@ps
］疑似類は、［
不正な／正しい
］値が入力された要素のうち［
利用者が有意にヤリトリしたもの
］に`限り^em，表現する。
これらの目的は、
利用者が自身の入力における過ちを識別し易くすることにある。
◎
The :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it. Their purpose is to help the user identify mistakes in their input.
</p>

<p>
これらの疑似類は、
少なくとも［
利用者が~formを提出するよう試みた時点
］から［
利用者が入力~要素と再びヤリトリするか~formを再設定する時点
］までは，対応する要素
【 `invalid$ps ／ `valid$ps に合致する要素】
に合致するモノトスル
— 他のときでも、
利用者~向けに~errorを強調する方が適切になるならば，合致させてヨイ。
`user-invalid$ps は，例えば、
利用者が入力~値を変更して~focusを別の要素へ移動した時点から，
`invalid$ps な入力~要素に合致させ、
利用者が入力を成功裡に正したなら，その時点から合致させなくすることもできる。
◎
These pseudo-classes must at least match their respective elements after the user has attempted to submit the form and before the user has interacted again with the input element or reset the form. They may also match at other times, as would be appropriate for highlighting an error to the user. For example, :user-invalid could start matching an :invalid input element once the user has changed its value and focus has moved to another element; or stop matching only after the user has successfully corrected the input.
</p>

<p>
~host言語は、
合致するための規則をより精確に定義しても，~platform規約へ先送りしてもヨイ
— 他の場合、
正確な挙動は~UAにより定義される。
いずれにせよ、［
`user-invalid$ps ／ `user-valid$ps
］疑似類は［
`invalid$ps ／ `valid$ps
］に合致する要素に限り合致するモノトスル。
~HTML要素に係わる特有な規則は、
`~HTML仕様＠~HTMLselectors#selector-user-invalid$を見よ。
`HTML$r
◎
Host languages may define more precise matching rules or defer to platform conventions; otherwise the exact behavior is UA-defined. Regardless, the :user-invalid pseudo-class must only match :invalid elements; and the :user-valid pseudo-class must only match :valid elements. See the HTML specification for the specific rules pertaining to HTML elements. [HTML]
</p>

<div class="example">
<p>
例えば，次の文書~片における `input$e 要素は、
~pageが読込まれた時点では
（ `input$e の初期~値（ `value=11^a ）が最大（ `max=10^a ）による拘束に違反するので），
`invalid$ps に合致することになるが、
利用者が［
当の入力~fieldと有意にヤリトリするか，それを所有している~formを提出するよう試みる
］までは， `user-invalid$ps に合致しない。
◎
For example, the input element in the following document fragment would match :invalid as soon as the page is loaded (because the input’s initial value violates its max constraint) but it won’t match :user-invalid until the user significantly interacts with the input field or attempts to submit the form it’s part of.
</p>

<pre class="lang-html">&lt;form&gt;
  &lt;label&gt;
    Volume:
    &lt;input name='vol' type=number min=0 max=10 value=11&gt;
  &lt;/label&gt;
  ...
&lt;/form&gt;
</pre>
</div>

			</section>
		</section>
	</section>
	<section id="structural-pseudos">
<h2 title="Tree-Structural pseudo-classes">14. ~tree構造上の疑似類</h2>

<p>
`構造上の疑似類@
（ `structural pseudo-class^en ）は、［
文書~tree内にある何かを表すが，他の`単純-選択子$や`結合子$では表現し得ない~~追加~情報
］に基づく選択を許可するために導入された概念である。
◎
Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
</p>

<p>
~text~nodeなどの非~要素~nodeは、
親の中での子の位置（ “付番” ）を計算するときには数えられない。
この付番は 1 から開始される。
◎
Standalone text and other non-element nodes are not counted when calculating the position of an element in the list of children of its parent. When calculating the position of an element in the list of children of its parent, the index numbering starts at 1.
</p>

<p>
`構造上の疑似類$は、
文書~tree内の要素のみに適用される
— それらは、
`疑似要素$には決して合致しないモノトスル。
◎
The structural pseudo-classes only apply to elements in the document tree; they must never match pseudo-elements.
</p>

		<section id="the-root-pseudo">
<h3 title=":root pseudo-class">14.1. `root^ps 疑似類</h3>

<p>
`root@ps
疑似類は、
`根~要素$を表現する。
例えば，~DOM文書においては、
`文書~要素$に合致する。
◎
The :root pseudo-class represents an element that is the root of the document.
◎
For example, in a DOM document, the :root pseudo-class matches the document element. In HTML, this will be the html element (unless scripting has been used to modify the document).
</p>

		</section>
		<section id="the-empty-pseudo">
<h3 title=":empty pseudo-class">14.2. `empty^ps 疑似類</h3>

<p>
`empty@ps
疑似類は、
`文書~空白~文字$を除き， “空” な（子が無い）要素を表現する。
文書~treeの用語で言えば、
要素が “空” かどうかに影響するものは，要素~nodeおよび［
内容~node（~text~nodeや実体~参照など）のうち長さ 0 でない~dataを含むもの
］に限られ，
他の~node（~commentや処理命令など）は影響しないモノトスル。
`DOM$r
◎
The :empty pseudo-class represents an element that has no children except, optionally, document white space characters. In terms of the document tree, only element nodes and content nodes (such as [DOM] text nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.
</p>

<p class="trans-note">【
現代の~DOM（すなわち `DOM$r ）においては，
実体~参照（ `EntityReference$I ）は廃されたので、
影響するものは［
要素（ `Element$I ）,
~text（ `Text$I ）
］に限られる
（実体参照を利用する~XML文書においては、
置換-後の状態に基づいて解釈されることになろう）。
また， “他の~node” に該当するものは、［
~comment（ `Comment$I ）,
処理命令（ `ProcessingInstruction$I ）,
文書（ `Document$I ）,
文書片（ `DocumentFragment$I ）,
~doctype（ `DocumentType$I ）
］に限られる。
】</p>

<div class="example">
<p>
`p:empty^css は、
次の~HTML片においては，
`p^e 要素~用の妥当な表現になる：
◎
Examples: p:empty is a valid representation of the p elements in the following HTML fragment:
</p>

<pre class="lang-html">
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt; &lt;!-- comment --&gt;&lt;/p&gt;
</pre>

<p>
`div:empty^css は、
次の~HTML片においては，
`div^e 要素~用の妥当な表現にならない：
◎
div:empty is not a valid representation of the &lt;div&gt; elements in the following fragment:
</p>

<pre class="lang-html">
&lt;div&gt;text&lt;/div&gt;
&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
&lt;div&gt;&lt;p&gt;bla&lt;/p&gt;&lt;/div&gt;
&lt;div&gt;this is not &lt;p&gt;:empty&lt;/p&gt;&lt;/div&gt;
</pre>
</div>

<p class="note">注記：
`~level 2$, `~level 3$ では、
`empty^ps は，空白のみを包含する要素には合致していなかった。
これは、変更された：
~HTMLにおいては、
空白は広く縮約-可能であり，~source~codeの整形~用に利用される
— とりわけ，終了~tagが省略された要素は、
そのような空白を およそ~DOM~text内容に吸収する。
そのため、［
作者が空と知覚する多くの要素は、
期待されるとおり，この選択子で選択できる
］よう変更された。
◎
Note: In Level 2 and Level 3 of Selectors, :empty did not match elements that contained only white space. This was changed so that that—given white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents—elements which authors perceive of as empty can be selected by this selector, as they expect.
</p>

		</section>
		<section id="child-index">
<h3 title="Child-indexed Pseudo-classes">14.3. 子付番 疑似類</h3>

<p>
この節にて定義される疑似類は、
要素の`同胞~群$における付番
【要素はその同胞~群の中で何個目に~~位置するか】
に基づいて選択する。
◎
The pseudo-classes defined in this section select elements based on their index amongst their inclusive siblings.
</p>

<p class="note">注記：
`~level 3$ では、
これらの選択子を，［［［
要素の親の，子~list
］における，要素の付番
］に基づいて要素を選択するもの
］として述べていた
（この記述は、
この節~自体, および いくつかの疑似類の下でも，生き残る）。
が、
要素の親が無いあるいは要素でない場合を除外する理由はないので、
`同胞~群$の中での要素の相対的な付番と言い換えられた。
◎
Note: Selectors 3 described these selectors as selecting elements based on their index in the child list of their parents. (This description survives in the name of this very section, and the names of several of the pseudo-classes.) As there was no reason to exclude them from matching elements without parents, or with non-element parents, they have been rephrased to refer to an element’s relative index amongst its siblings.
</p>

<p>
要素 %E の
`同胞~群@
とは、
%E と`広義-同胞$の関係にある要素たちが成す，`~tree順序$による集合である
（ %E 自身は常に含まれる）。
単に “同胞~群” と記されたときは、
文書~tree内のある要素の`同胞~群$を意味する。
</p>

<p class="trans-note">【
この用語は、
以下を簡潔に述べるために，この訳に導入している。
定義により、
親が要素でない要素であっても，その`同胞~群$は要素を含む
（例：`文書~要素$の同胞~群は、それ自身のみからなる）。
】</p>

			<section id="the-nth-child-pseudo">
<h4 title=":nth-child() pseudo-class">14.3.1. `nth-child()^ps 疑似類</h4>

<p>
疑似類~記法
`nth-child(~AnB [of ~varS]? )@ps
は、
`選択子~list$ %S として `complex-real-selector-list$t をとり，
各 `同胞~群$ごとに［
その中で %S に合致するもののうち，~AnBthの要素
］を表現する。
`of %S^css が省略された場合の既定の %S は、
`*|*^css になる。
◎
The :nth-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, which is a &lt;complex-real-selector-list&gt;. If S is omitted, it defaults to *|*.
</p>

<p>
この節, および後続の節に現れる
<dfn id="AnB-notation">~AnB 記法</dfn>
とその解釈は、
`CSS3SYN$r `§ ~AnB 小構文＠~CSSSYN#anb-microsyntax$
にて定義される。
◎
The An+B notation and its interpretation are defined in CSS Syntax 3 § 6 The An+B microsyntax; it represents any index i = An + B for any non-negative integer n.
</p>

<p class="note">注記：
この目的においては、
要素たちが成す~listは 1 から数えることに注意。
例えば、
要素の最初の子は `nth-child(2n+1)$ps に合致することになる
— %n ~EQ 0 のときの式は 1 に評価されるので。
◎
Note: For these purposes, the list of elements is 1-indexed; that is, the first child of an element has index 1, and will be matched by :nth-child(2n+1), because when n=0 the expression evaluates to 1.
</p>

<p>
この選択子は、
例えば，
~table内の~rowを飛び飛びに選択したり,
段落の~text色を一定周期で順繰りに変えていく用途に利用できる。
◎
For example, this selector could address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four.
</p>

<div class="example">
<pre class="lang-css">
:nth-child(even)   /* <span class="comment">2, 4, 6, … 個目の要素を表現する</span> */
:nth-child(10n-1)  /* <span class="comment">9, 19, 29, … 個目の要素を表現する</span> */
:nth-child(10n+9)  /* <span class="comment">同じ</span> */
:nth-child(10n+-1) /* <span class="comment">構文が妥当でないので無視される</span> */◎
:nth-child(even)   /* represents the 2nd, 4th, 6th, etc elements
:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc elements */
:nth-child(10n+9)  /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
</pre>
</div>

<p class="note">注記：
`nth-child()$ps 疑似類の詳細度は、
疑似類 1 個の詳細度, および［
選択子~list引数を成す各`複階-選択子$の詳細度のうち最も高いもの
（引数が無ければ 0 ）
］を足した結果になる。
`選択子の詳細度の計算-法§を見よ。
したがって，
`:nth-child(~AnB of %S)^css
の詳細度は、
`%S:nth-child(~AnB)^css
と正確に同じになる
— 挙動においては相違するが
（下の例を見よ）。
◎
Note: The specificity of the :nth-child() pseudo-class is the specificity of a single pseudo-class plus, if S is specified, the specificity of the most specific complex selector in S. See § 17 Calculating a selector’s specificity. Thus S:nth-child(An+B) and :nth-child(An+B of S) have the exact same specificity, although they do differ in behavior (see example below).
</p>

<div class="example">
<p>
引数に選択子も渡せば、
その選択子に合致するものから， N 個目の要素を選択できる。
例えば，次の選択子は、
`important^l ~classに属する~list~itemのうち，最初の 3 個に合致する：
◎
By passing a selector argument, we can select the Nth element that matches that selector. For example, the following selector matches the first three “important” list items, denoted by the .important class:
</p>

<pre class="lang-css">
:nth-child(-n+3 of li.important)
</pre>

<p>
これは、
引数に与えた選択子を，次の様に関数の外側に出したものとは異なることに注意：
◎
Note that this is different from moving the selector outside of the function, like:
</p>

<pre class="lang-css">
li.important:nth-child(-n+3)
</pre>

<p>
この選択子は、
最初の 3 個だけの~list~itemのうち， `important^l ~classに属するものを選択する。
◎
This selector instead just selects the first three children if they also happen to be "important" list items.
</p>
</div>

<div class="example">
<p>
引数に選択子を利用して，
~tableを成す~rowたちを正しく縞模様にする例を示す。
◎
Here’s another example of using the selector argument, to ensure that zebra-striping a table works correctly.
</p>

<p>
通常は、
次に類似な~CSSを利用して，縞模様にすることになろう：
◎
Normally, to zebra-stripe a table’s rows, an author would use CSS similar to the following:
</p>

<pre class="lang-css">
tr {
  background: white;
}
tr:nth-child(even) {
  background: silver;
}
</pre>

<p>
しかしながら，いずれかの~rowが隠されて表示されなくなった場合、
それを挟む同じ背景~色を伴う~rowどうしが隣接して，~patternが崩れる。
~rowが~HTMLの `hidden^a 属性により隠されるとするなら、
次の~CSSにより，どの~rowが隠されても背景は適正に交替するようになり、
一連の~rowは~~安定的に縞模様になる：
◎
However, if some of the rows are hidden and not displayed, this can break up the pattern, causing multiple adjacent rows to have the same background color. Assuming that rows are hidden with the [hidden] attribute in HTML, the following CSS would zebra-stripe the table rows robustly, maintaining a proper alternating background regardless of which rows are hidden:
</p>

<pre class="lang-css">
tr {
  background: white;
}
tr:nth-child(even of :not([hidden])) {
  background: silver;
}
</pre>
</div>

			</section>
			<section id="the-nth-last-child-pseudo">
<h4 title=":nth-last-child() pseudo-class">14.3.2. `nth-last-child()^ps 疑似類</h4>

<p>
疑似類~記法
`nth-last-child(~AnB [of ~varS]? )@ps
は、
`選択子~list$ %S として `complex-real-selector-list$t をとり，
各 `同胞~群$ごとに［
その中で %S に合致するもののうち，最後から~AnBthの要素
］を表現する。
`of %S^css が省略された場合の既定の %S は、
`*|*^css になる。
◎
The :nth-last-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, counting backwards from the end. S is &lt;complex-real-selector-list&gt;. If S is omitted, it defaults to *|*.
</p>

<p class="note">注記：
`nth-last-child()$ps 疑似類の詳細度は、
`nth-child()$ps 疑似類と同様に，定例の疑似類の詳細度に その選択子~引数 %S の詳細度を足した結果になる。
`選択子の詳細度の計算-法§を見よ。
◎
Note: The specificity of the :nth-last-child() pseudo-class, like the :nth-child() pseudo-class, combines the specificity of a regular pseudo-class with that of its selector argument S. See § 17 Calculating a selector’s specificity.
◎
↑↑The CSS Syntax Module [CSS3SYN] defines the An+B notation.
</p>

<div class="example">
<pre class="lang-css">
tr:nth-last-child(-n+2)  /* <span class="comment">
~HTML~table内の最後の 2 本の~rowを表現する
◎
represents the two last rows of an HTML table
</span> */

foo:nth-last-child(odd)  /* <span class="comment">
`同胞~群$の中で，最後から数えて，奇数~個目に在る `foo^e 要素を表現する
◎
represents all odd foo elements in their parent element, counting from the last one
</span> */
</pre>
</div>

			</section>
			<section id="the-first-child-pseudo">
<h4 title=":first-child pseudo-class">14.3.3. `first-child^ps 疑似類</h4>

<p>
`first-child@ps
疑似類は、
各 `同胞~群$ごとに，その中の最初の要素を表現する。
これは
`:nth-child(1)^css
と同じである。
◎
The :first-child pseudo-class represents an element that if first among its inclusive siblings. Same as :nth-child(1).
</p>

<div class="example">
<p>
次の選択子は、
`div^e 要素の最初の子である
`p^e 要素を表現する：
◎
Examples: The following selector represents a p element that is the first child of a div element:
</p>

<pre class="lang-css">
div &gt; p:first-child
</pre>

<p>
この選択子は、
次の片の `div^e 要素の内側の `p^e 要素を表現する：
◎
This selector can represent the p inside the div of the following fragment:
</p>

<pre class="lang-html">
&lt;p&gt; .note の前の最後の P&lt;/p&gt;
&lt;div class="note"&gt;
&lt;p&gt; .note 内の最初の P&lt;/p&gt;
&lt;/div&gt;◎
&lt;p&gt; The last P before the note.&lt;/p&gt;
&lt;div class="note"&gt;
&lt;p&gt; The first P inside the note.&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>
が、
次の片の 2 個目の `p^e 要素は表現しない：
◎
but cannot represent the second p in the following fragment:
</p>

<pre class="lang-html">
&lt;p&gt; .note の前の最後の P&lt;/p&gt;
&lt;div class="note"&gt;
&lt;h2&gt; Note &lt;/h2&gt;
&lt;p&gt; .note 内の最初の P&lt;/p&gt;
&lt;/div&gt;◎
&lt;p&gt; The last P before the note.&lt;/p&gt;
&lt;div class="note"&gt;
&lt;h2&gt; Note &lt;/h2&gt;
&lt;p&gt; The first P inside the note.&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>
通例的には，次の 2 つの選択子は等価になる：
◎
The following two selectors are usually equivalent:
</p>

<pre class="lang-css">
* &gt; a:first-child   /* <span class="comment">
`a^e は任意の要素の最初の子~要素
◎
a is first child of any element
</span> */
a:first-child       /* <span class="comment">
同じ（ `a^e は`根~要素$でないとする）
◎
Same (assuming a is not the root element)
</span> */
</pre>
</div>

			</section>
			<section id="the-last-child-pseudo">
<h4 title=":last-child pseudo-class">14.3.4. `last-child^ps 疑似類</h4>

<p>
`last-child@ps
疑似類は、
各 `同胞~群$ごとに，その中の最後の要素を表現する。
これは
`:nth-last-child(1)^css
と同じである。
◎
The :last-child pseudo-class represents an element that is last among its inclusive siblings. Same as :nth-last-child(1).
</p>

<div class="example">
<p>
次の選択子は、
“有順序~list” `ol$e 要素の最後の子である
“~list~item” `li$e 要素を表現する：
◎
Example: The following selector represents a list item li that is the last child of an ordered list ol.
</p>

<pre class="lang-css">
ol &gt; li:last-child
</pre>
</div>

			</section>
			<section id="the-only-child-pseudo">
<h4 title=":only-child pseudo-class">14.3.5. `only-child^ps 疑似類</h4>

<p>
`only-child@ps
疑似類は、
自身の他に同じ`同胞~群$に属する要素は無いものを表現する
— これは，［
`:first-child:last-child^css ／
`:nth-child(1):nth-last-child(1)^css
］と同じになるが、
`詳細度$は これらより低くなる。
◎
The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
</p>

			</section>
		</section>
		<section id="typed-child-index">
<h3 title="Typed Child-indexed Pseudo-classes">14.4. 有型 子付番 疑似類</h3>

<p>
この節に与える`疑似類$は，`子付番 疑似類§に類似するが、
<strong>`同じ型の要素＠#type-selectors$たちに~~限定された中で</strong>，`同胞~群$における要素の付番に基づいて解決される。
◎
The pseudo-classes in this section are similar to the Child Index Pseudo-classes, but they resolve based on an element’s index among elements of the same type (tag name) in their sibling list.
</p>

			<section id="the-nth-of-type-pseudo">
<h4 title=":nth-of-type() pseudo-class">14.4.1. `nth-of-type()^ps 疑似類</h4>

<p>
疑似類~記法
`nth-of-type(~AnB)@ps
は、
`:nth-child(~AnB of %S)^css
に合致するものと同じ要素たちを表現する
— ここで %S は、
合致させる要素に合致するような［
名前空間~接頭辞と`型~選択子$
］である。
例えば，~HTML `img$e 要素がこの`疑似類$に合致するかどうかを考えるとき、
%S は `html|img^css になる
（ `html^css に対する適切な名前空間は`宣言-済み$とする）。
◎
The :nth-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared).
</p>

<div class="example">
<p>
これにより，複数の画像を交替的に `float^p ~~配置させられる：
◎
CSS example: This allows an author to alternate the position of floated images:
</p>

<pre class="lang-css">
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
</pre>

<p class="trans-note">【
仮に， `img^css を`全称~選択子$（ `*^css ）に置き換えたなら、
各 要素~型ごとに個別に適用した結果の和集合を表現することになる。
言い換えれば， `*:nth-of-type(~AnB)^css は、［
ある`型$ %E があって， `%E:nth-of-type(~AnB)^css に合致するもの
］すべてを表現する（ `:nth-child(~AnB)^css とは異なる）。
】</p>
</div>

<p class="note">注記：
要素の型が事前に既知ならば、
この疑似類は，型~選択子も伴う `nth-child()$ps の利用と等価になる。
すなわち、
`img:nth-of-type(2)^css は， `*:nth-child(2 of img)^css と等価になる。
◎
Note: If the type of the element is known ahead of time, this pseudo-class is equivalent to using :nth-child() with a type selector. That is, img:nth-of-type(2) is equivalent to *:nth-child(2 of img).
</p>

			</section>
			<section id="the-nth-last-of-type-pseudo">
<h4 title=":nth-last-of-type() pseudo-class">14.4.2. `nth-last-of-type()^ps 疑似類</h4>

<p>
疑似類~記法
`nth-last-of-type(~AnB)@ps
は、
`:nth-last-child(~AnB of %S)^css
に合致するものと同じ要素たちを表現する
— ここで %S は、
合致させる要素に合致するような［
名前空間~接頭辞と`型~選択子$
］である。
例えば，~HTML `img$e 要素がこの`疑似類$に合致するかどうかを考えるとき、
%S は `html|img^css になる
（ `html^css に対する適切な名前空間は`宣言-済み$とする）。
◎
The :nth-last-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-last-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared).
</p>

<div class="example">
<p>
次の選択子により、
`body^e 要素の子であって, 最初と最後を除くすべての `h2^e 要素を表現することが可能になる：
◎
Example: To represent all h2 children of an XHTML body except the first and last, one could use the following selector:
</p>

<pre class="lang-css">
body &gt; h2:nth-of-type(n+2):nth-last-of-type(n+2)
</pre>

<p>
この事例では、
`not()$ps を利用する方法もある
（選択子は同じ~~長さになる）：
◎
In this case, one could also use :not(), although the selector ends up being just as long:
</p>

<pre class="lang-css">
body &gt; h2:not(:first-of-type):not(:last-of-type)
</pre>
</div>

			</section>
			<section id="the-first-of-type-pseudo">
<h4 title=":first-of-type pseudo-class">14.4.3. `first-of-type^ps 疑似類</h4>

<p>
`first-of-type@ps
疑似類は、
`:nth-of-type(1)^css
に合致するものと同じ要素たちを表現する。
◎
The :first-of-type pseudo-class represents the same element as :nth-of-type(1).
</p>

<div class="example">
<p>
次の選択子は、
“定義~list” `dl$e の中で最初の“定義~~見出し” `dt$e を表現する。
すなわち この `dt^e は親の `dl^e 要素の子~要素~listの中で，その型の最初の要素になる：
◎
Example: The following selector represents a definition title dt inside a definition list dl, this dt being the first of its type in the list of children of its parent element.
</p>

<pre class="lang-css">
dl dt:first-of-type
</pre>

<p>
これは，次の例の最初の 2 個の `dt^e 要素に対しては妥当な記述になるが、
3 個目のそれに対してはそうならない：
◎
It is a valid description for the first two dt elements in the following example but not for the third one:
</p>

<pre class="lang-html">
&lt;dl&gt;
  &lt;dt&gt;gigogne&lt;/dt&gt;
  &lt;dd&gt;
    &lt;dl&gt;
      &lt;dt&gt;fusée&lt;/dt&gt;
      &lt;dd&gt;multistage rocket&lt;/dd&gt;
      &lt;dt&gt;table&lt;/dt&gt;
      &lt;dd&gt;nest of tables&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/dd&gt;
&lt;/dl&gt;
</pre>
</div>

			</section>
			<section id="the-last-of-type-pseudo">
<h4 title=":last-of-type pseudo-class">14.4.4. `last-of-type^ps 疑似類</h4>

<p>
`last-of-type@ps
疑似類は、
`:nth-last-of-type(1)^css
に合致するものと同じ要素たちを表現する。
◎
The :last-of-type pseudo-class represents the same element as :nth-last-of-type(1).
</p>

<div class="example">
<p>
次の選択子は、
~tableを成す各 “~row” `tr$e 要素の最後の “~data~cell” `td$e 要素を表現する：
◎
Example: The following selector represents the last data cell td of a table row tr.
</p>

<pre class="lang-css">
tr &gt; td:last-of-type
</pre>
</div>

			</section>
			<section id="the-only-of-type-pseudo">
<h4 title=":only-of-type pseudo-class">14.4.5. `only-of-type^ps 疑似類</h4>

<p>
`only-of-type@ps
疑似類は、
`:first-of-type:last-of-type^css
に合致するものと同じ要素たちを表現する。
◎
The :only-of-type pseudo-class represents the same element as :first-of-type:last-of-type.
</p>

			</section>
		</section>
	</section>
	<section id="combinators">
<h2 title="Combinators">15. 結合子</h2>

		<section id="descendant-combinators">
<h3 title="Descendant combinator ( )">15.1. 子孫~結合子	( ~space )</h3>

<p>
文書~treeの中で，別の要素の子孫であるような要素を記述する選択子が求まれることがある
（例： “ `h1^e 要素に包含されている `em^e 要素” ）。
`子孫~結合子@
（ `descendant combinator^en ）は、
その種の関係性を表出する。
◎
At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an em element that is contained within an H1 element"). The descendant combinator expresses such a relationship.
</p>

<p>
`子孫~結合子$は、
2 つの`複合-選択子$を分離する空白で記される。
◎
A descendant combinator is whitespace that separates two compound selectors.
</p>

<p>
［
`A B^css
］の形による選択子は、
ある `A^e 要素を先祖とする，任意な子孫 `B^e 要素を表現する。
◎
A selector of the form A B represents an element B that is an arbitrary descendant of some ancestor element A.
</p>

<div class="example">
<p>
次の選択子を考える：
◎
Examples: For example, consider the following selector:
</p>

<pre class="lang-css">
h1 em
</pre>

<p>
これは、
`h1^e 要素の子孫である `em^e 要素を表現する。
それは、
次の片の一部分に対する妥当な記述になる：
◎
It represents an em element being the descendant of an h1 element. It is a correct and valid, but partial, description of the following fragment:
</p>

<pre class="lang-html">
&lt;h1&gt;この&lt;span class="myclass"&gt;~~見出し行は
&lt;em&gt;とても&lt;/em&gt;重要です&lt;/span&gt;&lt;/h1&gt;
</pre>
<!-- 
&lt;h1&gt;This &lt;span class="myclass"&gt;headline
is &lt;em&gt;very&lt;/em&gt; important&lt;/span&gt;&lt;/h1&gt;
-->
<p>
次の選択子：
◎
The following selector:
</p>

<pre class="lang-css">
div * p
</pre>

<p>
は、
`div^e 要素の孫（子の子）またはより遠い子孫である
`p^e 要素を表現する。
"`*^css" の両側に在る`空白$は`全称~選択子$の一部をなさないことに注意。
この`空白$は`結合子$である  — すなわち，
`div^e 要素が 何らかの要素 %E の先祖であって, かつ
%E が `p^e 要素の先祖でなければならないことを指示している。
◎
represents a p element that is a grandchild or later descendant of a div element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace is a combinator indicating that the div must be the ancestor of some element, and that that element must be an ancestor of the p.＼
</p>

<p>
`子孫~結合子$と`属性~選択子§を組合せる次の選択子は、
`href^a 属性が設定されていて, かつ
`div^e 要素の内側に在る `p^e 要素の内側に在るような要素を表現する：
◎
The following selector, which combines descendant combinators and attribute selectors, represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a div:
</p>

<pre class="lang-css">
div p *[`href^a]
</pre>
</div>

		</section>
		<section id="child-combinators">
<h3 title="Child combinator (&gt;)">15.2. 子~結合子	( `&gt;^css )</h3>

<p>
`子~結合子@
（ `child combinator^en ）は、
要素と要素の親子関係を述べる。
それは、
2 つの`複合-選択子$を分離する
“大なり記号”
— `003E^U0,
`&gt;@css
—
で記される。
◎
A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, &gt;) code point and separates two compound selectors.
</p>

<div class="example">
<p>
次の選択子は、
`p^e 要素のうち `body^e 要素の子であるものを表現する：
◎
Examples: The following selector represents a p element that is child of body:
</p>

<pre class="lang-css">
body &gt; p
</pre>

<p>
`子孫~結合子$と`子~結合子$を組合せる例：
◎
The following example combines descendant combinators and child combinators.
</p>

<pre class="lang-css">
div ol&gt;li p
</pre>
【！ LEAVE THOSE SPACES OUT! see below 】
<p>
これは， `li$e 要素の子孫である `p$e 要素を表現するが、
`li$e 要素は `ol$e 要素の子でなければならず，
`ol$e 要素は `div$e 要素の子孫でなければならない。
結合子 "`&gt;^css" の前後において`空白$が外されている【省略できる】ことに注意。
◎
It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the "&gt;" combinator has been left out.
</p>
</div>

<p>
要素の子のうち何個目かを選択するような類いの選択子については、
`~tree構造上の疑似類§を見よ。
◎
For information on selecting the first child of an element, please see the section on the :first-child pseudo-class above.
</p>

		</section>
		<section id="adjacent-sibling-combinators">
<h3 title="Next-sibling combinator (+)">15.3. 直後~同胞~結合子	( `+^css )</h3>

<p>
`直後~同胞~結合子@
（ `next-sibling combinator^en ）は、
2 つの`複合-選択子$を分離する
“正符号”
— `002B^U0,
`+@css
—
で記される。
この 2 つの`複合-選択子$で表現される要素
— 順に %A, %B —
は、
文書~treeの中で同じ親を共有していて，
%A が %B の直前に在る必要がある。
非~要素~node（例：要素~間に挟まれた~text）は、
要素の隣接性を考慮する際には無視される。
◎
The next-sibling combinator is made of the “plus sign” (U+002B, +) code point that separates two compound selectors. The elements represented by the two compound selectors share the same parent in the document tree and the element represented by the first compound selector immediately precedes the element represented by the second one. Non-element nodes (e.g. text between elements) are ignored when considering the adjacency of elements.
</p>

<div class="example">
<p>
次の選択子は、
`math$e 要素の直後に在る `p$e 要素を表現する：
◎
Examples: The following selector represents a p element immediately following a math element:
</p>

<pre class="lang-css">
math + p
</pre>

<p>
次の選択子には、
`属性~選択子$が追加されている
— `h1^e 要素は `opener^l ~classに属するとする拘束も追加されている —
ことを除いて，前の例と概念的に類似する：
◎
The following selector is conceptually similar to the one in the previous example, except that it adds an attribute selector — it adds a constraint to the h1 element, that it must have class="opener":
</p>

<pre class="lang-css">
h1.opener + h2
</pre>
</div>

		</section>
		<section id="general-sibling-combinators">
<h3 title="Subsequent-sibling combinator (~)">15.4. 後続~同胞~結合子	( `~^css )</h3>

<p>
`後続~同胞~結合子@
（ `subsequent-sibling combinator^en ）は、
2 つの`複合-選択子$を分離する
“~tilde”
— `007E^U0,
`~@css
—
で記される。
この 2 つの`複合-選択子$で表現される要素
— 順に %A, %B —
は、
文書~treeの中で同じ親を共有していて，
%A が %B よりも先行する必要がある（直前でなくともよい）。
◎
The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) code point that separates two compound selectors. The elements represented by the two compound selectors share the same parent in the document tree and the element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one.
</p>

<div class="example">
<pre class="lang-css">
h1 ~ pre
</pre>

<p>
は、
`h1^e 要素に後続する `pre^e 要素を表現する。
それは、
次の片の一部分に対する妥当な記述になる：
◎
represents a pre element following an h1. It is a correct and valid, but partial, description of:
</p>

<pre class="lang-html">
&lt;h1&gt;~~関数 a の~~定義&lt;/h1&gt;
&lt;p&gt;この表のすべての図には~~関数 a(x) を~~適用すること。&lt;/p&gt;
&lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;
</pre>
<!-- 
&lt;h1&gt;Definition of the function a&lt;/h1&gt;
&lt;p&gt;Function a(x) has to be applied to all figures in the table.&lt;/p&gt;
&lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;
-->
</div>

		</section>
	</section>
	<section id="table-pseudos">
<h2 title="Grid-Structural Selectors">16. 格子構造~選択子</h2>

<p>
2 次元~格子~内の~cellの（その~row【 “行” 】と~col【 “列” 】への）二重の所属関係は、
階層的~markup言語における親子関係では，一方しか表現し得ない
— もう一方への所属関係は、
文書~言語の意味論において明示的または暗黙的に定義されなければナラナイ。
2 つの最も共通的な階層的~markup言語
— ~HTML, DocBook —
は，どちらも~markupは~row主導であり
（すなわち，~rowへの所属関係が階層的に表現される）、
~colについては暗黙に与えられなければナラナイ。
その種の~colへの暗黙な所属関係を表現-可能にするため、
`~col結合子$，および［
`nth-col()$ps , `nth-last-col()$ps
］疑似類が定義される。
~col主導な文書~言語においては、
これらの疑似類は，~rowへの所属関係に合致する†。
◎
The double-association of a cell in a 2D grid (to its row and column) cannot be represented by parentage in a hierarchical markup language. Only one of those associations can be represented hierarchically: the other must be explicitly or implicitly defined in the document language semantics. In both HTML and DocBook, two of the most common hierarchical markup languages, the markup is row-primary (that is, the row associations are represented hierarchically); the columns must be implied. To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined. In a column-primary format, these pseudo-classes match against row associations instead.
</p>

<p class="trans-note">【†
以下の記述に現れる “~col” は、
文書~言語が~row主導であるものと見做している。
~col主導な文書~言語においては，~rowを表現するものと見做す必要がある。
】</p>

		<section id="the-column-combinator">
<h3 title="Column combinator (||)">16.1. ~col結合子（ `||^css ）</h3>

<p>
`~col結合子@
（ `column combinator^en ）は、
~col要素†が表現する~colへの~cell要素の所属関係を表現し，
2 個の `007C^U が成す並び
—
`||@css
—
で記される。
~colへの所属は，文書~言語の意味論のみに基づいて決定される
— 要素が呈示されるかどうかや, どう呈示されるかを問わず。
複数の~colに属する~cell要素は、
それらどの~colへの所属を指示する選択子でも，表現される。
◎
The column combinator, which consists of two pipes (||) represents the relationship of a column element to a cell element belonging to the column it represents. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating membership in any of those columns.
</p>

<p class="trans-note">【†
［
~row／~col
］主導な階層的~markup言語の下で［
~col／~row
］を指示する要素
（例：~HTMLにおいては `col^e 要素）。
文書~言語が そのような要素を定義しない場合、
何らかの疑似要素で表現-可能にしない限り，
利用し得ないことになる。
】</p>

<div class="example">
<p>
次の例では、
~cell C, E, G に~styleが適用される。
◎
The following example makes cells C, E, and G gray.
</p>

<pre class="lang-css">
col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}
</pre>

<pre class="lang-html">
&lt;table&gt;
      &lt;col span="2"    &gt; &lt;col class="selected"&gt;
  &lt;tr&gt;&lt;td&gt; A &lt;td&gt;      B &lt;td&gt; C
  &lt;tr&gt;&lt;td colspan="2"&gt; D &lt;td&gt; E
  &lt;tr&gt;&lt;td&gt; F &lt;td colspan="2"&gt; G
&lt;/table&gt;
</pre>
</div>

		</section>
		<section id="the-nth-col-pseudo">
<h3 title=":nth-col() pseudo-class">16.2. `nth-col()^ps 疑似類</h3>

<p>
疑似類~記法
`nth-col(~AnB)@ps
は、
~cell要素のうち［
互いに同胞な~colのうち~AnBthの~colに属するもの
］を表現する。
~colへの所属の定義は、
`~col結合子$を見よ。
◎
The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns.
◎
The CSS Syntax Module [CSS3SYN] defines the An+B notation.
</p>

		</section>
		<section id="the-nth-last-col-pseudo">
<h3 title=":nth-last-col() pseudo-class">16.3. `nth-last-col()^ps 疑似類</h3>

<p>
疑似類~記法
`nth-last-col(~AnB)@ps
は、
~cell要素のうち［
互いに同胞な~colのうち最後から~AnBthの~colに属する~cell要素
］を表現する。
~colへの所属の定義は、
`~col結合子$を見よ。
◎
The :nth-last-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns.
◎
The CSS Syntax Module [CSS3SYN] defines the An+B notation.
</p>

		</section>
	</section>
	<section id="specificity-rules">
<h2 title="Calculating a selector’s specificity">17. 選択子の詳細度の計算-法</h2>

<div class="p">
<p>
`選択子$の
`詳細度@
（ `specificity^en ）は、
3 個の負でない整数 ( %A, %B, %C ) が成す組であり，
【！for a given element】以下に従って計算される。
</p>

<p class="trans-note">【
詳細度の効果については、
`~cascade法$における`宣言の詳細度$を見よ。
】</p>

<p>
先ず，`複階-選択子$の詳細度は：
</p>
◎
A selector’s specificity is calculated for a given element as follows:
</div>

<ul>
	<li>
選択子の中の `~ID選択子$の個数を数える（ = %A ）
◎
count the number of ID selectors in the selector (= A)
</li>
	<li>
選択子の中の［
`~class選択子$, `属性~選択子$, `疑似類$
］の個数を数える（ = %B ）
◎
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
</li>
	<li>
選択子の中の［
`型~選択子$, `疑似要素$
］の個数を数える（ = %C ）
◎
count the number of type selectors and pseudo-elements in the selector (= C)
</li>
	<li>
`全称~選択子$は無視する
◎
ignore the universal selector
</li>
</ul>

<p>
`選択子~list$の詳細度は、
どう合致したかに依存する
⇒
所与の［
`選択子~list$の照合~処理n
］において，効果を~~発揮する詳細度は、［
~list内の合致した`複階-選択子$の詳細度のうち最も高いもの
］になる。
◎
If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.
</p>

<p>
少数の疑似類は、
他の選択子~用の “評価~文脈” を供するので，その詳細度は特別に定義される：
◎
A few pseudo-classes provide “evaluation contexts” for other selectors, and so have their specificity defined specially:
</p>

<ul>
	<li>
［
`is()$ps ／ `not()$ps ／ `has()$ps
］疑似類の詳細度は、［
その選択子~list引数を成す各`複階-選択子$の詳細度のうち最も高いもの
］に置換される。
◎
The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.
</li>
	<li>
［
`nth-child()$ps ／ `nth-last-child()$ps
］疑似類の詳細度は、
それ自体の詳細度（ 1 個の疑似類~選択子として数える）に［
選択子~list引数を成す各`複階-選択子$の詳細度
］のうち最も高いもの
— 引数が無い場合は ( 0, 0, 0 ) —
を足した結果になる。
◎
Analogously, the specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo-class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument (if any).
</li>
	<li>
`where()$ps 疑似類の詳細度は、
( 0, 0, 0 ) に置換される。
◎
The specificity of a :where() pseudo-class is replaced by zero.
</li>
</ul>

<div class="example">
<p>
例えば：
◎
For example:
</p>

<ul>
	<li>
`:is(em, #foo)^css の詳細度は、［
`em^e, `p id=foo^e, `em id=foo^e
］のどれに合致しようが，`~ID選択子$（ `#foo^css ）に対するときと同様に ( 1, 0, 0 ) になる。
◎
:is(em, #foo) has a specificity of (1,0,0)—like an ID selector (#foo)—when matched against any of &lt;em&gt;, &lt;p id=foo&gt;, or &lt;em id=foo&gt;.
</li>
	<li>
`.qux:where(em, #foo#bar#baz)^css の詳細度は、
( 0, 1, 0 ) になる
— `where()^ps の外側に在る `.qux^css のみが詳細度に寄与する。
◎
.qux:where(em, #foo#bar#baz) has a specificity of (0,1,0): only the .qux outside the :where() contributes to selector specificity.
</li>
	<li>
`:nth-child(even of li, .item)^css の詳細度は、［
`li^e, `ul class=item^e, `li class=item id=foo^e
］のどれに合致しようが，［
`~class選択子$（ `.item^css ） ＋ 1 個の疑似類
］に対するときと同様に ( 0, 2, 0 ) になる。
◎
:nth-child(even of li, .item) has a specificity of (0,2,0)—like a class selector (.item) plus a pseudo-class—when matched against any of &lt;li&gt;, &lt;ul class=item&gt;, or &lt;li class=item id=foo&gt;.
</li>
	<li>
`:not(em, strong#foo)^css の詳細度は、
どの要素に合致しようが，［
`型~選択子$（ `strong^css ） ＋ `~ID選択子$（ `#foo^css ）
］に対するときと同様に ( 1, 0, 1 ) になる。
◎
:not(em, strong#foo) has a specificity of (1,0,1)—like a tag selector (strong) combined with an ID selector (#foo)—when matched against any element.
</li>
</ul>
</div>

<p>
詳細度の比較では、
上述した
%A, %B, %C
成分が順に（~~辞書式に）比較される
⇒＃
%A 値が大きい方の詳細度がより高く、
%A 値が等しければ %B 値が大きい方の詳細度がより高く、
%B 値も等しければ %C 値が大きい方の詳細度がより高く、
すべての値が等しければ 2 つの詳細度は等しい。
◎
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger C value is more specific; if all the values are tied, the two specificities are equal.
</p>

<p>
~storage制限があるときは、
実装は %A, %B, %C の大きさに制限を課してヨイ。
その場合、
その上限を超えた値は，その上限~内に切詰めるモノトスル。
◎
Due to storage limitations, implementations may have limitations on the size of A, B, or C. If so, values higher than the limit must be clamped to that limit, and not overflow.
</p>

<div class="example">
<pre class="lang-css">
*               /* a=0 b=0 c=0 */
LI              /* a=0 b=0 c=1 */
UL LI           /* a=0 b=0 c=2 */
UL OL+LI        /* a=0 b=0 c=3 */
H1 + *[`REL^a=up]  /* a=0 b=1 c=1 */
UL OL LI.red    /* a=0 b=1 c=3 */
LI.red.level    /* a=0 b=2 c=1 */
#x34y           /* a=1 b=0 c=0 */
#s12:not(FOO)   /* a=1 b=0 c=1 */
.foo :is(.bar, #baz)   /* a=1 b=1 c=0 */
</pre>
</div>

<p class="note">注記：
同じ`単純-選択子$の繰返しは許容され、
詳細度を増大させる。
【`~subject$は変えずに詳細度を高くできる。例えば `#id#id^css 】
◎
Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.
</p>

<p class="note">注記：
~HTML `style^a 属性にて指定される~styleの詳細度については、
`CSSSTYLEATTR$r の
`~CSS~style属性＠~CSSSTYLEATTR#interpret$にて述べられている。
◎
Note: The specificity of the styles specified in an HTML style attribute is described in CSS Style Attributes. [CSSSTYLEATTR]
</p>

	</section>
	<section id="grammar">
<h2 title="Grammar">18. 文法</h2>

<p>
選択子は、
以下の`文法に則って構文解析-$される：
◎
Selectors are parsed according to the following grammar:
</p>

<p class="trans-note">【
名前に `-real-^c を含んでいる生成規則は、
`疑似-複合-選択子$を含まない~version。
】</p>

<pre class="prod" id="_grammar-of-selectors">
`selector-list@t 【`選択子~list$】
	= `complex-selector-list$t

`complex-selector-list@t 【`複階-選択子$たちが`成す~list$】
	= `complex-selector$t#
`complex-real-selector-list@t
	= `complex-real-selector$t#

`compound-selector-list@t 【`複合-選択子$たちが`成す~list$】
	= `compound-selector$t#

`simple-selector-list@t 【`単純-選択子$たちが`成す~list$】
	= `simple-selector$t#

`relative-selector-list@t 【`相対~選択子$たちが`成す~list$】
	= `relative-selector$t#
`relative-real-selector-list@t
	= `relative-real-selector$t#

`complex-selector@t 【`複階-選択子$】
	= `complex-selector-unit$t [ `combinator$t? `complex-selector-unit$t ]*
`complex-selector-unit@t 【`複階-選択子$を成す各 “単位” 】
	= [ `compound-selector$t? `pseudo-compound-selector$t* ]!
`complex-real-selector@t
	= `compound-selector$t [ `combinator$t? `compound-selector$t ]*

`relative-selector@t 【`相対~選択子$】
	= `combinator$t? `complex-selector$t
`relative-real-selector@t
	= `combinator$t? `complex-real-selector$t

`compound-selector@t 【`複合-選択子$】
	= [ `type-selector$t? `subclass-selector$t* ]!
`pseudo-compound-selector@t 【`疑似-複合-選択子$】
	= `pseudo-element-selector$t `pseudo-class-selector$t*

`simple-selector@t 【`単純-選択子$】
	= `type-selector$t | `subclass-selector$t

`combinator@t 【`結合子$（`子孫~結合子$以外）】
	= '&gt;'
	| '+'
	| '~'
	| [ '|' '|' ]

`ns-prefix@t 【`名前空間$】
	= [ `ident-token$t | '*' ]? '|'
`wq-name@t
	= `ns-prefix$t? `ident-token$t

`type-selector@t 【`型~選択子$】
	= `wq-name$t
	| `ns-prefix$t? '*'

`subclass-selector@t
	= `id-selector$t
	| `class-selector$t
	| `attribute-selector$t
	| `pseudo-class-selector$t

`id-selector@t 【`~ID選択子$】
	= `hash-token$t

`class-selector@t 【`~class選択子$】
	= '.' `ident-token$t

`attribute-selector@t 【`属性~選択子$】
	= '[' `wq-name$t ']'
	| '['
		  `wq-name$t `attr-matcher$t
		  [ `string-token$t | `ident-token$t ]
		  `attr-modifier$t?
	  ']'
`attr-matcher@t 【`属性~選択子§】
	= [ '~' | '|' | '^' | '$' | '*' ]? '='
`attr-modifier@t 【`属性~値の文字大小比較§】
	= i
	| s

`pseudo-class-selector@t 【`疑似類$】
	= : `ident-token$t
	| : `function-token$t `any-value$t )

`pseudo-element-selector@t 【`疑似要素$】
	= : `pseudo-class-selector$t
	| `legacy-pseudo-element-selector$t
`legacy-pseudo-element-selector@t 【旧来の構文】
	=  : [before | after | first-line | first-letter]
</pre>

<p>
上の文法を解釈するときには、
次の規則が適用される：
◎
In interpreting the above grammar, the following rules apply:
</p>

<ul>
	<li>

<p>
次に挙げる箇所では、
空白は禁止される
【`子孫~結合子$と多義的になるので】
— 以下に現れる “2 個の” は、
“~~任意の，~~連続する 2 個の” の略記である：
◎
White space is forbidden:
</p>
		<ul>
			<li>
［
`compound-selector$t ／ `complex-selector-unit$t
］を成す 2 個の~top-level成分の合間
（すなわち、
`type-selector$t と `subclass-selector$t の合間,
`pseudo-element-selector$t と `pseudo-class-selector$t の合間,
等々）。
◎
Between any of the top-level components of a &lt;compound-selector&gt; or &lt;complex-selector-unit&gt; (that is, forbidden between the &lt;type-selector&gt; and &lt;subclass-selector&gt;, or between the &lt;pseudo-element-selector&gt; and &lt;pseudo-class-selector&gt;, etc).
</li>
			<li>
［
`type-selector$t ／ `class-selector$t
］を成す 2 個の成分の合間。
◎
Between any of the components of a &lt;type-selector&gt; or a &lt;class-selector&gt;.
</li>
			<li>
`pseudo-element-selector^t を成す 2 個の '`:^css' の合間。
◎
↓</li>
			<li>
［
`pseudo-element-selector^t ／ `pseudo-class-selector$t
］を成す '`:^css' と［
`ident-token$t ／ `function-token$t
］（順不同）の合間。
◎
Between the ':'s, or between the ':' and &lt;ident-token&gt; or &lt;function-token&gt;, of a &lt;pseudo-element-selector&gt; or a &lt;pseudo-class-selector&gt;.
</li>
			<li>
`wq-name$t を成す 2 個の成分の合間。
◎
Between any of the components of a &lt;wq-name&gt;.
</li>
			<li>
`attr-matcher$t を成す 2 個の成分の合間。
◎
Between the components of an &lt;attr-matcher&gt;.
</li>
			<li>
`complex-selector-unit$t を成す 2 個の成分
（ `compound-selector$t ／ `pseudo-compound-selector$t ）
の合間
◎
Between the &lt;compound-selector&gt; or &lt;pseudo-compound-selector&gt;s in a &lt;complex-selector-unit&gt;
</li>
			<li>
`combinator$t を成す 2 個の成分の合間。
◎
Between the components of a &lt;combinator&gt;.
</li>
		</ul>

<p>
2 個の `complex-selector-unit$t の合間において
`combinator$t が省略された場合、
そこには，空白が`要求される^em
（これは、
`子孫~結合子$が利用されていることを指示する）。
◎
Whitespace is required between two &lt;complex-selector-unit&gt;s if the &lt;combinator&gt; between them is omitted. (This indicates the descendant combinator is being used.)
</p>
	</li>
	<li>
`id-selector$t 内の `hash-token$t の値は、
`~CSS識別子$でなければナラナイ。
◎
In &lt;id-selector&gt;, the &lt;hash-token&gt;’s value must be an identifier.
</li>
	<li>
`legacy-pseudo-element-selector$t 生成規則は、
`pseudo-class-selector$t 生成規則から除外される。
（すなわち、
【！~CSSWG/css2/#selectordef-before】
`:before＠~CSS22/selector.html#before-and-after$css, 等々を疑似類として構文解析してはナラナイ
— それを行ったとき，
（例えば，他の`単純-選択子$が後続していることに因り）
当の選択子が妥当になる場合でも。）
◎
The &lt;pseudo-class-selector&gt; production excludes the &lt;legacy-pseudo-element-selector&gt; production. (That is, :before/etc must never be parsed as a pseudo-class, even if doing so would cause the selector to become valid due to, for example, other simple selectors following it.)
</li>
</ul>

<p class="note">注記：
選択子は、
様々な［
より特有な, 構文上の拘束
］の~subjectにもなる
— 上述の文法を固守することは必要yであるが、
選択子が妥当と見なされるには`不足である^em。
選択子を構文解析する際の追加的な規則は、
`無効な選択子と~errorの取扱い§を見よ。
◎
Note: A selector is also subject to a variety of more specific syntactic constraints, and adherence to the grammar above is necessary but not sufficient for the selector to be considered valid. See § 3.9 Invalid Selectors and Error Handling for additional rules for parsing selectors.
</p>

<p class="note">注記：
一般に， `pseudo-element-selector$t が妥当になるのは、
`complex-selector$t 内の最後の `compound-selector$t の終端に置かれた場合に限られる。
しかしながら，一部の状況下では、
他の［
`pseudo-element-selector$t ／ `pseudo-class-selector$t
］たちも後続し得る
— が、
そうなり得るかどうかは，各 事例ごとに指定される
（例えば、
`利用者~動作~疑似類$は，どの`疑似要素$の後にも許容され、
`~treeに留まる疑似要素$は， `slotted()$pe 疑似要素の後にも許容される）。
◎
Note: In general, a &lt;pseudo-element-selector&gt; is only valid if placed at the end of the last &lt;compound-selector&gt; in a &lt;complex-selector&gt;. In some circumstances, however, it can be followed by more &lt;pseudo-element-selector&gt;s or &lt;pseudo-class-selector&gt;s; but these are specified on a case-by-case basis. (For example, the user action pseudo-classes are allowed after any pseudo-element, and the tree-abiding pseudo-elements are allowed after the ::slotted() pseudo-element.)
</p>

<p class="note" id="single-colon-pseudos">注記：
`~level 2 の疑似要素＠~CSS22/selector.html#pseudo-element-selectors$
（ `before$pe, `after$pe, `first-line$pe, `first-letter$pe ）
は、
旧来の理由から，
先頭に "`:^css" を 1 個だけ伴わせて
— `pseudo-class-selector$t を真似るように —
書いてもヨイ。
◎
The four Level 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter) may, for legacy reasons, be written with only a single ":" character at their front, making them resemble a &lt;pseudo-class-selector&gt;.
</p>

		<section id="forgiving-selector">
<h3 title="&lt;forgiving-selector-list&gt; and &lt;forgiving-relative-selector-list&gt;">18.1. `forgiving-selector-list^t</h3>

<p>
旧来の理由から、
一般に，選択子~listは、
~list内に構文解析に失敗した選択子がある場合には
（一例として、［
新たな／~UAに特有な
］選択子~特能を利用しているもの），［
当の選択子~list全体が無効になる
］よう挙動する。
この挙動は、
旧い~UAでも正しく働く~CSSを書くときに，新たな選択子を利用するのを難しくし得る。
◎
For legacy reasons, the general behavior of a selector list is that if any selector in the list fails to parse (because it uses new or UA-specific selector features, for instance), the entire selector list becomes invalid. This can make it hard to write CSS that uses new selectors and still works correctly in older user agents.
</p>

<p>
`forgiving-selector-list@t
生成規則は，代わりに、
~list内の各~選択子を個別に構文解析して，それに失敗したものを単純に無視する
— 残りの選択子は、
依然として利用できるようになる。
◎
The &lt;forgiving-selector-list&gt; production instead parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used.
</p>

<p class="note">注記：
~style規則は、
依然として，通常の寛容でない［
選択子~listの挙動
］を利用する。
`forgiving-selector-list$t は、［
`is()$ps, `where()$ps
］内に限り利用される。
~style規則の選択子を `is()$ps 内に包装することは
— 詳細度に対しても小さな含意があるが —
実質的に，それを寛容なものに “昇格する”
— それが疑似要素を包含していない限り
（疑似要素は［
`is()$ps, `where()$ps
］においては妥当でない）。
◎
Note: Style rules still use the normal, unforgiving selector list behavior. &lt;forgiving-selector-list&gt; is used in :is() and :where() only. Although it does have some minor implications on specificity, wrapping a style rule’s selector in :is() effectively "upgrades" it to become forgiving, so long as it doesn’t contain any pseudo-elements (which aren’t valid in :is() or :where()).
</p>

<p>
`forgiving-selector-list$t は、
構文上は
<span class="prod">`any-value$t?</span>
と等価であるが、
その実際の値は，`選択子~listとして寛容に構文解析する$ことにより得される。
◎
Syntactically, &lt;forgiving-selector-list&gt; is equivalent to &lt;any-value&gt;?. It is then parsed as a forgiving selector list to obtain its actual value.
</p>

<div class="algo">
<p>
`選択子~listとして寛容に構文解析する@
~algoは、
所与の
( %入力 )
に対し：
◎
To parse as a forgiving selector list given an input input:
</p>
<ol>
	<li>
%選択子~list ~LET
`~commaで分離された~listを~CSS文法に則って構文解析する$( %入力, `complex-real-selector$t )
◎
Parse a list of &lt;complex-real-selector&gt;s from input, and let selector list be the result.
</li>
	<li>
%選択子~list から［
`失敗^i ／ `無効な選択子$
］をすべて除去する
◎
Remove all failure items from selector list, and all items that are invalid selectors,＼
</li>
	<li>
~RET %選択子~list を表現する `selector-list$t （空にもなり得る）
◎
then return a &lt;selector-list&gt; representing the remaining items in selector list. (This might be empty.)
</li>
</ol>
</div>

<p>
`forgiving-selector-list$t を成す無効な~itemに対しては
（明示的に未知な［
選択子／構文
］を利用しているものも，
【！merely contextually,】
既知な構文を利用しているが当の文脈においては妥当でないものも）、
その`詳細度$は 0 になるものとして扱うモノトスル。
◎
Any items in a &lt;forgiving-selector-list&gt; that are invalid (whether explicitly, by using unknown selectors or syntax, or merely contextually, using known syntax but in an invalid context) must be treated as having zero specificity.
</p>

<p class="note">注記：
`forgiving-selector-list$t を利用するものが，
選択子~引数をとる選択子のうち［
`is()$ps, `where()$ps
］に限られるのは、
意図的である。
◎
Note: &lt;forgiving-selector-list&gt; is intentionally used only in :is() and :where(), not in any other selector that takes a selector argument.
</p>

		</section>
	</section>
	<section id="api-hooks">
<h2 title="API Hooks">19. ~API~hook</h2>

<p>
この節では，~Selectorsの概念を利用する仕様の策定を援助するため、
他の仕様から呼び出せる，いくつかの~API~hookを定義する。
◎
To aid in the writing of specs that use Selectors concepts, this section defines several API hooks that can be invoked by other specifications.
</p>

<p class="issue">
これらは、
まだ必要yなのか？
今や、
より厳格な［
`合致-$, および`無効な選択子$
］の定義がある。
仕様~間で協調するのは，述語より名詞を通す方が ずっと容易であることに加え、［
`querySelector()$c から返される要素たちの正確な順序
］の様な詳細は，［
~Selectorsよりも~DOM仕様にて定義される方がイミを成す
］ように見受けられる。
◎
Are these still necessary now that we have more rigorous definitions for match and invalid selector? Nouns are a lot easier to coordinate across specification than predicates, and details like the exact order of elements returned from querySelector seem to make more sense being defined in the DOM specification than in Selectors.
</p>

		<section id="parse-a-selector">
<h3 title="Parse A Selector">19.1. 選択子の構文解析-法</h3>

<div class="algo">
<p>
`選択子として構文解析する@
~algoは、
所与の
( 文字列 %~source )
に対し，［
`複階-選択子$たちが`成す~list, または `失敗^i
］を返す：
◎
This section defines how to parse a selector from a string source. It returns either a complex selector list, or failure.
</p>
<ol>
	<li>
%選択子 ~LET %~source を `selector-list$t の`文法に則って構文解析-$した結果
◎
Let selector be the result of parsing source as a &lt;selector-list&gt;.＼

</li>
	<li>
~IF［
%選択子 ~EQ `失敗^i
］
⇒
~RET `失敗^i
— %~source は`無効な選択子$である
◎
If this returns failure, it’s an invalid selector; return failure.
</li>
	<li>
~IF［
%選択子 は他の何らかの理由で`無効な選択子$である
（例：`宣言-済み$でない名前空間~接頭辞を包含している）
］
⇒
~RET `失敗^i
◎
If selector is an invalid selector for any other reason (such as, for example, containing an undeclared namespace prefix), return failure.
</li>
	<li>
~RET %選択子
◎
Otherwise, return selector.
</li>
</ol>
</div>

		</section>
		<section id="parse-relative-selector">
<h3 title="Parse A Relative Selector">19.2. 相対~選択子の構文解析-法</h3>

<div class="algo">
<p>
`相対~選択子として構文解析する@
~algoは、
所与の
( 文字列 %~source )
に対し，［
`複階-選択子$たちが`成す~list, または `失敗^i
］を返す：
◎
This section defines how to parse a relative selector from a string source. It returns either a complex selector list, or failure.
</p>
<ol>
	<li>
%選択子 ~LET %~source を `relative-selector-list$t の`文法に則って構文解析-$した結果
◎
Let selector be the result of parsing source as a &lt;relative-selector-list&gt;.＼
</li>
	<li>
~IF［
%選択子 ~EQ `失敗^i
（ %~source は`無効な選択子$である）
］
⇒
~RET `失敗^i
◎
If this returns failure, it’s an invalid selector; return failure.
</li>
	<li>
~IF［
%選択子 は他の何らかの理由で`無効な選択子$である
（例：`宣言-済み$でない名前空間~接頭辞を包含している）
］
⇒
~RET `失敗^i
◎
If selector is an invalid selector for any other reason (such as, for example, containing an undeclared namespace prefix), return failure.
</li>
	<li>
~RET %選択子
◎
Otherwise, return selector.
</li>
</ol>
</div>

		</section>
		<section id="match-against-element">
<h3 title="Match a Selector Against an Element">19.3. 要素に対し選択子を照合する</h3>

<div class="algo">
<p>
`要素に対し選択子を照合する@
~algoは、
所与の
( `選択子~list$ %選択子, 要素 %要素, %視野ng根~群 )
に対し，［
`成功^i ／ `失敗^i
］を返す
— %視野ng根~群 は、［
`scope$ps 疑似類を解決するための`視野ng根$
］たちが成す集合であり，省略時は空とする：
◎
This section defines how to match a selector against an element.
◎
APIs using this algorithm must provide a selector and an element.
Callers may optionally provide:
• one or more scoping roots, for resolving the :scope pseudo-class against.
◎
This algorithm returns either success or failure.
</p>

<p class="trans-note">【
原文の~algoは、
%視野ng根~群 をどう適用するかについて，明示的には何も述べていないが、
［
照合の際に`視野ng根$の規則に暗黙的に従う／
この~algoが呼出す~algoにも暗黙的に渡される
］ものと見受けられる。
以下の各~節の~algoも同様。
】</p>

<div>
<ol>
	<li>
%選択子 を成す
~EACH( `複階-選択子$ %複階-選択子 )
に対し
⇒
~IF［
`要素に対し複階-選択子を照合する$( %複階-選択子, %要素 ) ~EQ `成功^i
］
⇒
~RET `成功^i
</li>
	<li>
~RET `失敗^i
</li>
</ol>

◎
For each complex selector in the given selector (which is taken to be a list of complex selectors), match the complex selector against element, as described in the following paragraph. If the matching returns success for any complex selector, then the algorithm return success; otherwise it returns failure.
</div>
</div>

<div class="algo">
<p>
`要素に対し複階-選択子を照合する@
~algoは、
所与の
( `複階-選択子$ %複階-選択子, %要素 )
に対し，［
`成功^i ／ `失敗^i
］を返す：
◎
To match a complex selector against an element, process it compound selector at a time, in right-to-left order. This process is defined recursively as follows:
</p>
<ol>
	<li>
%複階-選択子 の末尾の`複合-選択子$を成す
~EACH( `単純-選択子$ %単純-選択子 )
に対し
⇒
~IF［
%単純-選択子 は %要素 に合致しない
］
⇒
~RET `失敗^i
◎
If any simple selectors in the rightmost compound selector does not match the element, return failure.
</li>
	<li>
~IF［
%複階-選択子 は 1 個の`複合-選択子$のみからなる
］
⇒
~RET `成功^i
◎
Otherwise, if there is only one compound selector in the complex selector, return success.
</li>
	<li>
<p>
%要素~群 ~LET %複階-選択子 内の最後の`結合子$により %要素 に関係し得るような，アリなすべての要素たちが成す集合
</p>

<p class="trans-note">【
例えば`子孫~結合子$の場合、
%要素 の先祖すべてからなる集合になるであろう。
】</p>
◎
Otherwise, consider all possible elements that could be related to this element by the rightmost combinator.＼
</li>
	<li>
%複階-選択子 ~SET %複体 から［
末尾の`複合-選択子$, 最後の`結合子$
］を除去した結果の`複階-選択子$
◎
If the operation of matching the selector consisting of this selector with the rightmost compound selector and rightmost combinator removed＼
</li>
	<li>
%要素~群 を成す
~EACH( %要素 )
に対し
⇒
~IF［
`要素に対し複階-選択子を照合する$( %複体, %要素 ) ~EQ `成功^i
］
⇒
~RET `成功^i
◎
against any one of these elements returns success, then return success.＼
</li>
	<li>
~RET `失敗^i
◎
Otherwise, return failure.
</li>
</ol>
</div>

		</section>
		<section id="match-against-pseudo-element">
<h3 title="Match a Selector Against a Pseudo-element">19.4. 疑似要素に対し選択子を照合する</h3>

<div class="algo">
<p>
`疑似要素に対し選択子を照合する@
~algoは、
所与の
( `選択子~list$ %選択子, `疑似要素$ %疑似要素, %視野ng根~群 （省略可能）)
に対し，［
`成功^i ／ `失敗^i
］を返す
— %視野ng根~群 は、
`要素に対し選択子を照合する$~algoに述べたものと同じ引数とする：
◎
This section defines how to match a selector against a pseudo-element.
◎
APIs using this algorithm must provide a selector and a pseudo-element. They may optionally provide the same things they may optionally provide to the algorithm to match a selector against an element.
◎
This algorithm returns success or failure.
</p>
<ol>
	<li>
<p>
%選択子 を成す
~EACH( `複階-選択子$ %複体 )
に対し：
◎
For each complex selector in the given selector, if both:
</p>
		<ol>
			<li>
~IF［
%複体 の末尾の`単純-選択子$は %疑似要素 に合致しない
］
⇒
~CONTINUE
◎
the rightmost simple selector in the complex selector matches pseudo-element, and
</li>
			<li>
%複体 ~SET %複体 から末尾の`単純-選択子$を除去した結果
◎
↓</li>
			<li>
~IF［
`要素に対し複階-選択子を照合する$( %複体, %疑似要素 の`出自の要素$ ) ~EQ `成功^i
【！any optional parameters provided to this algorithm は利用されていない】
］
⇒
~RET `成功^i
◎
the result of running match a complex selector against an element on the remainder of the complex selector (with just the rightmost simple selector of its rightmost complex selector removed), pseudo-element’s corresponding element, and any optional parameters provided to this algorithm returns success,
◎
then return success.
</li>
		</ol>
	</li>
	<li>
~RET `失敗^i
◎
Otherwise (that is, if this doesn’t happen for any of the complex selectors in selector), return failure.
</li>
</ol>
</div>

		</section>
		<section id="match-against-tree">
<h3 title="Match a Selector Against a Tree">19.5. ~treeに対し選択子を照合する</h3>

<div class="algo">
<p>
`~treeに対し選択子を照合する@
~algoは、
所与の：
◎
This section defines how to match a selector against a tree.
◎
APIs using this algorithm must provide＼
</p>
<ul>
	<li>
%選択子
— `選択子~list$
◎
a selector, and＼
</li>
	<li>
%根~要素~群
— %選択子 を照合する対象とされる， 1 個~以上の`下位tree$の根~要素たちが成す集合。
%根~要素~群 内のすべての要素の`根$は，同じでなければナラナイ。
◎
one or more root elements indicating the subtrees that will be searched by the selector. All of the root elements must share the same root, or else calling this algorithm is invalid.
◎
They may optionally provide:
</li>
	<li>
%視野ng根~群
（省略時は空~集合）
— 1 個~以上の`視野ng根$たちが成す集合
（空でないならば、
当の選択子は`視野~付き$であることを指示する）
◎
One or more scoping roots indicating the selector is scoped.
</li>
	<li>
<p>
%許容される疑似要素
（省略時は無条件）
— どの`疑似要素$が許容されるかを与える条件【！to show up in the match list】
（無条件ならば，すべての疑似要素が許容される）
◎
A list of pseudo-elements that are allowed to show up in the match list. If not specified, this defaults to allowing all pseudo-elements.
</p>

<p class="issue">
この様な~remoteな仕方で本当に取扱われるものは、
`~treeに留まる疑似要素$に限られる。
◎
Only the tree-abiding pseudo-elements are really handled in any way remotely like this.
</p>
	</li>
</ul>

<p>
に対し，要素たちが成す~listを返す：
◎
This algorithm returns a (possibly empty) list of elements.
</p>
<ol>
	<li>
%候補~要素~群 ~LET %根~要素~群 とそれらの子孫である要素~すべてからなる~list
— 他が指定されない限り，`~shadowも含めた~tree順序$で~sortされるとする。
◎
Start with a list of candidate elements, which are the root elements and all of their descendant elements, sorted in shadow-including tree order, unless otherwise specified.
</li>
	<li>
%視野ng根~群 を成す
~EACH( %視野ng根 )
に対し
⇒
%候補~要素~群 から %視野ng根 の`子孫$でない要素~すべてを除去する
◎
If scoping root were provided, then remove from the candidate elements any elements that are not descendants of at least one scoping root.
</li>
	<li>
%結果 ~LET 空な~list
◎
Initialize the selector match list to empty.
</li>
	<li>
<p>
%候補~要素~群 を成す
~EACH( %要素 )
に対し：
◎
For each element in the set of candidate elements:
</p>
		<ol>
			<li>
~IF［
`要素に対し選択子を照合する$( %要素, %選択子 ) ~EQ `成功^i
］
⇒
%結果 に %要素 を追加する
◎
If the result of match a selector against an element for element and selector is success, add element to the selector match list.
</li>
			<li>
<p>
%要素 を`出自の要素$とする
~EACH( `疑似要素$ %疑似要素 )
に対し
⇒
~IF［
%疑似要素 は %許容される疑似要素 である
］~AND［
`疑似要素に対し選択子を照合する$( %疑似要素, %選択子 ) ~EQ `成功^i
］
⇒
%結果 に %疑似要素 を追加する
◎
For each possible pseudo-element associated with element that is one of the pseudo-elements allowed to show up in the match list, if the result of match a selector against a pseudo-element for the pseudo-element and selector is success, add the pseudo-element to the selector match list.
</p>

<p class="issue">
%結果 における，疑似要素と他の要素との順序が定義されていない。
今の所，この情報を公開する文脈はないが、
最終的には，何かを公開する前に裁定しておく必要がある。
◎
The relative position of pseudo-elements in selector match list is undefined. There’s not yet a context that exposes this information, but we need to decide on something eventually, before something is exposed.
</p>
			</li>
		</ol>
	</li>
	<li>
~RET %結果
</li>
</ol>
</div>

		</section>
	</section>
	<section id="dom-mapping">
<h2 title="Appendix A: Guidance on Mapping Source Documents &amp; Data to an Element Tree">A. ~source文書~dataから要素~treeへ対応付けるための指導</h2>

◎非規範的

<p>
~DOMが述べる要素の~tree構造は強力かつ有用である一方で、
~tree構造に基づく~dataを記述する，どの言語を~model化するにも
（あるいは~graph構造に基づくものでも，相応しい解釈の下で）
十分に汎用である。
◎
The element tree structure described by the DOM is powerful and useful, but generic enough to model pretty much any language that describes tree-based data (or even graph-based, with a suitable interpretation).
</p>

<p>
~HTMLの様な一部の言語は、
資源から~DOM~objを生産するための手続-が，すでに きちんと定義されている。
そうでない言語による文書に~Selectorsを適用するためには、
その種の手続-が，その言語に定義されなければナラナイ。
◎
Some languages, like HTML, already have well-defined procedures for producing a DOM object from a resource. If a given language does not, such a procedure must be defined in order for Selectors to apply to documents in that language.
</p>

<p>
文書~言語は、
最低限，何が~DOMの “要素” の概念に対応付けられるかを定義しなければナラナイ。
◎
At minimum, the document language must define what maps to the DOM concept of an "element".
</p>

<p>
首な，~node間の一対多の関係性
— ~tree構造における親から子への,
あるいは ~graph構造における~nodeからその近隣への
関係性 —
が、要素の子~nodeとして反映されるベキである。
◎
The primary one-to-many relationship between nodes—parent/child in tree-based structures, element/neighbors in graph-based structures—should be reflected as the child nodes of an element.
</p>

<p>
可能なら、
要素の他の特能も，
`~DOMにおける同じ特能＠#data-model$に類似な目的を担う何かに対応付けるベキである：
◎
Other features of the element should be mapped to something that serves a similar purpose to the same feature in DOM:
</p>

<dl>
	<dt>
型
◎
type
</dt>
	<dd>
<p>
文書~言語が［
その要素たちを異なる要素~groupに判別し得る基本的なものとして，何らかの “型” の観念を備えている
］ならば、
それが， “型” 特能として反映されるベキである。
◎
If the elements in the document language have some notion of "type" as a basic distinguisher between different groups of elements, it should be reflected as the "type" feature.
</p>

<p>
この “型” を［
“~~基本的な” 名前
］と［
それらの名前をより高~levelな “名前空間” ~group
］に分離し得るならば、
後者は “名前空間” 特能として反映されるベキである。
他の場合、
要素は “名前空間” 特能を有するベキでなく，
名前~全体が “型” 特能として反映されるベキである。
◎
If this "type" can be separated into a "basic" name and a "namespace" that groups names into higher-level groups, the latter should be reflected as the "namespace" feature. Otherwise, the element shouldn’t have a "namespace" feature, and the entire name should be reflected as the "type" feature.
</p>

	<dt>
~ID
◎
id
</dt>
	<dd>
<p>
要素の何らかの側面が，文書~全体に渡り一意な識別子として~~機能する場合、
それが， “~ID” 特能に対応付けられるベキである。
◎
If some aspect of the element functions as a unique identifier across the document, it should be mapped to the "id" feature.
</p>

<p class="note">注記：
~HTMLにおいては、
要素が持ち得る~IDは 1 個に限られているが，一般にはそのように制約されるベキではない。
~IDの重要な性質は、
各~IDが単独の要素に結付けられることであり、
単独の要素は，複数の~IDを妥当に持ち得る。
◎
Note: While HTML only allows an element to have a single ID, this should not be taken as a general restriction. The important quality of an ID is that each ID should be associated with a single element; a single element can validly have multiple IDs.
</p>

	<dt>
~classと属性
◎
classes and attributes
</dt>
	<dd>
要素を識別するときに有用になる側面ではあるが，一般に，文書の中の一意な要素にはならないものは、［
“~label” （それ自体が文字列になるもの）／
“~prop” （名前と値の~pair）
］のいずれに等価になるかに依存して，［
“~class” ／ “属性”
］特能に対応付けられるベキである。
◎
Aspects of the element that are useful for identifying the element, but are not generally unique to elements within a document, should be mapped to the "class" or "attribute" features depending on if they’re something equivalent to a "label" (a string by itself) or a "property" (a name/value pair)
</dd>

	<dt>
疑似類と疑似要素
◎
pseudo-classes and pseudo-elements
</dt>
	<dd>
［
疑似類に合致する要素／疑似要素を有する要素
］は、
明示的に定義されなければナラナイ。
◎
If any elements match any pseudo-classes or have any pseudo-elements, that must be explicitly defined.
</dd>
	<dd class="issue">
`has()$ps や `is()$ps の様な一部の疑似類は、
`構文上のもの^em なので，常に働くべきであり、
それについて どこかで指示される必要がある。
構造上の疑似類は、
子~listが順序を有するならば，常に働くであろう。
◎
Some pseudo-classes are *syntactical*, like :has() and :is(), and thus should always work. Need to indicate that somewhere. Probably the structural pseudos always work whenever the child list is ordered.
</dd>
</dl>

<div class="example">
<p>
例えば、
`JSONSelect＠https://github.com/lloyd/JSONSelect$
は，~JSON文書から情報を抽出するために選択子を利用する~libraryである。
◎
For example, JSONSelect is a library that uses selectors to extract information from JSON documents.
</p>

<ul>
	<li>
~JSON文書の各［
`array^jt, `object^jt, `boolean^jt, `string^jt, `number^jt, `null^jt
］が，~tree構造を成す “要素” になる。
array ／ object 要素は，その内容を子として有する。
◎
The "elements" of the JSON document are each array, object, boolean, string, number, or null. The array and object elements have their contents as children.
</li>
	<li>
各~要素の型はその~JS型~名：
`array^l, `object^l, 等々になる。
◎
Each element’s type is its JS type name: "array", "object", etc.
</li>
	<li>
`object^jt の子は、
その key を~classとして有する。
◎
Children of an object have their key as a class.
</li>
	<li>
`array^jt の子は
`first-child$ps, `nth-child()$ps,
等々の疑似類に合致する。
◎
Children of an array match the :first-child, :nth-child(), etc pseudo-classes.
</li>
	<li>
根 `object^jt は `root$ps に合致する。
◎
The root object matches :root.
</li>
	<li>
特定0の［
値をとる, あるいは 部分文字列を包含する
］ような
`boolean^jt ／ `number^jt ／ `string^jt
要素に合致させるための
`val()^ps,
`contains()^ps
疑似類も追加的に定義する。
◎
It additionally defines :val() and :contains() pseudo-classes, for matching boolean/number/string elements with a particular value or which contain a particular substring.
</li>
</ul>

<p>
この構造は、
選択子による，~JSON文書に対する強力で簡潔な~query法を与えるに足るものになる。
◎
This structure is sufficient to allow powerful, compact querying of JSON documents with selectors.
</p>
</div>

	</section>
	<section id="compat">
<h2 title="Appendix B: Obsolete but Required -webkit- Parsing Quirks for Web Compat">B. 廃用にされたが要求される，~Web互換性を得るための `-webkit-^css 構文解析-法</h2>

<p>
`この付録は規範的である。^em
◎
This appendix is normative.
</p>

<p>
~Web文書を構文解析することを予期している~UAは、
旧来の~Web互換性による拘束に因り，次に挙げる特能を~supportするモノトスル：
◎
Due to legacy Web-compat constraints, user agents expecting to parse Web documents must support the following features:
</p>
<ul>
	<li>
`-webkit-autofill^ps `疑似要素$は、
`autofill$ps の`旧来の別名$selとして扱うモノトスル。
◎
:-webkit-autofill must be treated as a legacy selector alias of :autofill.
</li>
	<li>
<p>
他の`疑似要素$のうち［
名前が`~ASCII大小無視$で文字列 `-webkit-^l から始まる, かつ関数-記法でない
］ものは、
構文解析-時点では妥当なものと扱った上で
（すなわち、
`-webkit-foo^pe は妥当,
`-webkit-bar()^pe は妥当でない）、
自身が認識しないか~supportしない場合は，何にも合致しない
`未知な -webkit- 疑似要素@
（ `unknown -webkit- pseudo-element^en ）として扱う。
◎
All other pseudo-elements whose names begin with the string “-webkit-” (matched ASCII case-insensitively) and that are not functional notations must be treated as valid at parse time. (That is, ::-webkit-asdf is valid at parse time, but ::-webkit-jkl() is not.) If they’re not otherwise recognized and supported, they must be treated as matching nothing, and are unknown -webkit- pseudo-elements.
</p>

<p>
`未知な -webkit- 疑似要素$を直列化するときは、
~ASCII小文字~化するモノトスル。
◎
Unknown -webkit- pseudo-elements must be serialized in ASCII lowercase.
</p>

<details class="note">
<summary>
この過去互換は何によるもの？
◎
What’s this quirk about?
</summary>

<p>
~Selectorsは、
長きにわたり，単独の［
未知／無効
］な選択子が選択子~list全体を無効~化する挙動を備えている
（それを含んでいる複階-選択子 1 個だけを無効~化するのでなく）。
これは，一般には ~WGによる旧来の過ちと見なされるが、
現時点では修正し得ない
— 意図的かどうかを問わず，この挙動に依存している~stylesheetは あまりに多いので。
◎
Selectors have long had a behavior where a single unknown/invalid selector invalidates the entire selector list (rather than just invalidating the one complex selector it finds itself in). This is generally considered a legacy mistake by the WG, but can’t be fixed at this point, as too many stylesheets depend on this behavior, intentionally or not.
</p>

<p>
その~~影響の一つとして、
~vendorに特有な選択子を利用すると，それを認識しない他の~UAにおいては選択子~全体が無効~化され，~style規則~全体を~~無為にすることが挙げられる。
これは、
過去には，意図的に利用されていた：
まったくもって推奨されない実施であるが、
~style規則を，一部の~browserに限り無効~化して隠すために。
また、
意図的でなくとも利用されていた：
ある~styleを，ある要素と ~vendorに特有な疑似要素
（一部の~browserが公開する， `input$e に関係する様々な疑似要素など）
に~~同時に適用して
— 他の~browserにおいては、
その規則~全体が隠されることに~~気付くことなく。
◎
One aspect of this is that use of vendor-specific selectors invalidates the entire selector in other user agents that don’t recognize them, and takes the entire style rule down with it. This has been used intentionally in the past—in the severely-not-recommended practice of hiding style rules from some browsers by making them invalid in every other browser—and unintentionally, with people styling an element and also applying those styles to a vendor-specific pseudo-element (such as the various input-related pseudos some browsers expose), not realizing that this hides the entire rule from other browsers.
</p>

<p>
上のより一般な理由~付けに加え、
Safari や Chrome などの WebKit から派生した~UAは，
自身による~vendor接頭辞~付き疑似要素に関係する過去互換を追加的に備えている
— そこでは、
どの `-webkit-^pe 接頭辞~付き選択子も構文解析-時点では妥当と見なされる。
（この過去互換は、
おそらく，今はなき早期の~CSS特能の名残である
— 作者に自前の疑似要素を定義させるがままにする特能を見越して、
アリなすべての疑似要素を構文解析-時点では妥当であるものと意図的に扱っていた。）
◎
In addition to this more general reasoning, WebKit-derived user agents, such as Safari or Chrome, have an additional quirk related to their vendor-prefixed pseudo-elements, where any ::-webkit--prefixed selectors are considered valid at parse time. (This is probably a leftover quirk of an early CSS feature, since dropped, that intentionally treated all possible pseudo-elements as valid at parse time, in anticipation of a feature letting authors define their own pseudo-elements.)
</p>

<p>
他の旧来の過去互換
— `QUIRKS$r にて文書化されているものなど —
と類似に，このような［
特定0の~vendorに特有な特異性
］は、
他の~UAからは，［
一部の~siteが［
不用意にかどうかを問わず，それに依存していること
］に因り，非互換化されたように見える
］ことで十分~共通的なものになった。
そのようなわけで、
この過去互換は［
現代の~webを正しく具現化するためには，`要求される^em実施上の~~条項
］であり、すべての~UA用にそれを［
仕様化する／要求する
］ことは，［
今日の~web~pageが，現在の, および将来の~UAにおいて正しく具現化される
］見込みを高めることを確保する。
◎
Similar to other legacy quirks, such as those documented in [QUIRKS], this particular vendor-specific oddity has become common enough that other user agents are seeing sites breaking due to them depending on it, accidentally or not. As such, since the quirk is in practical terms required to render the modern web correctly, specifying it and requiring it for all user agents ensures that today’s web pages are more likely to be correctly rendered in user agents both current and future.
</p>

<p>
しかしながら，通例の過去互換と同じく、
これに意図的に依拠している~web~pageは、
~CSS~WGの~member, すべての まっとうな~web開発者から~~残念なものと~~見下されることになろう。
◎
As usual with quirks, however, webpages intentionally relying on this will be met with shaming and derision from members of the CSSWG, and all right-thinking web developers.
</p>
</details>

	</li>
</ul>

	</section>
	<section id="visited-privacy">
<h2 title="Appendix C: Example Privacy-Preserving :visited Restrictions">C. `visited$ps に対し~privacyを保全する制約の例</h2>

<p>
`visited$ps において利用者の~privacyを保護するための以前の試みは、［
敵対的~siteが，利用者が訪問した無関係な~siteも観測できる機会c
］を抑制するために，`複階的な制約と挙動＠https://developer.mozilla.org/docs/Web/CSS/Privacy_and_the_:visited_selector$を孕んでいた
— 【~script向けには，】~linkが［
`visited$ps, `link$ps
］どちらに合致するかについて “嘘をつく” 一方で、
利用者~向けには
— どの~linkをすでに~clickしたかを知り易くなるよう —
すべての事例で `visited$ps が働くことを許容する。
これは、
つまるところ，勝利し得ない軍拡競争になる
— これらの軽減策の下でも、
利用者の閲覧~履歴を抽出する
複数の仕方があり，文書化されている。
【具体的には、何らかの手段で画素の色を推定する “画素~攻撃” など。】
◎
Previous attempts to protect user privacy in :visited involved complex restrictions and behaviors to "lie" about whether the link match :visited or :link, to reduce the chance that a hostile site could observe what unrelated sites a user had visited while still allowing :visited to work in all cases and help the user know what links they’d already clicked. This is ultimately an arms race that can’t be won; there are multiple documented ways to still extract a user’s browsing history even with these mitigations.
</p>

<p>
この節は、
`訪問-済み~link履歴の区分-法の説明書き＠https://github.com/explainers-by-googlers/Partitioning-visited-links-history$
にて最初に開発され, 文書化された~approachを述べる
— それは、
利用者の閲覧~履歴~情報を区分して，
`visited$ps に合致する~linkは［
当の~siteの生成元が自前で観測することもできた~navi
］に対応するものに限ることを許容する。
それは，［
~siteには、
すでに理論~的に可用なもの以外の情報を公開しない
］一方で［
利用者にとっての `visited$ps の`有用さ^emをアリな限り保全する
］ので、
上で述べた複階的な軽減策を伴わずに，
`visited$ps を通常の疑似類として扱えるようになる。
◎
This section describes an approach first developed and documented at https://github.com/explainers-by-googlers/Partitioning-visited-links-history, that partitions a user’s browsing history information, to allow :visited to only match links corresponding to navigations that the site’s origin could have observed on its own. With this, :visited can be treated as a normal pseudo-class, without any of the complex mitigations described above, as it doesn’t expose any information not already theoretically available to the site, while still preserving as much of the usefulness of :visited as possible for the user.
</p>

<ol>
	<li>
<p>
~UAは、
%訪問-済み履歴 を有する
— それは，
( `~URL$, `生成元$, `~site$ )
が成す`~tuple$たちが成す集合であり、
各~tupleは，順に次に挙げる情報を指示する：
◎
Let visited history be a set containing tuples of three pieces of information:
</p>
		<ol>
			<li>
ある訪問-済みな~URL
◎
a visited URL
</li>
			<li>
ある~naviを開始した~site†の生成元
◎
an origin for the site that started a navigation
</li>
			<li>
前項の~naviを開始した~frameを包含している~top-level~site†用の~site
（これは，前項と`同じ~site$になることが多いが、
例えば利用者が `iframe^e 内の~linkを~clickした場合には，
相違し得る）。
◎
a site for the top-level site containing the frame that started the navigation. (This will often be the same as the previous, but can differ if the user clicks a link in a iframe, for example.)
</li>
		</ol>

<p class="trans-note">【†
“開始した~site” とは，当の`~navi＠~HTMLnav#navigate$を起動した`文書$を指し、
“~top-level~site” とは，
この文書の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$navを指すであろう。
以下の記述でも、
そのように言い換えることにする
（文書としての “~site” と用語としての`~site$が紛らわしいので）。
】</p>
	</li>
	<li class="algo">
<p>
ある~pageの`中から^em［
~link／~script
］により~naviが誘発されたときは
（ 例：
利用者が~page内の~linkを~clickしたとき／
~pageの~scriptが~naviを起動したとき）
は、
次を遂行する：
◎
Whenever a navigation is triggered from within a page—​e.g., from the user clicking a link, or a script on the page initiating a navigation—＼
</p>
		<ol>
			<li>
%行先~URL ~LET ~naviの行先~URL
◎
↓</li>
			<li>
%文書 ~LET 当の~pageを表現している`文書$
◎
↓</li>
			<li>
%生成元 ~LET %文書 の`生成元$doc
◎
↓</li>
			<li>
%~top-level文書 ~LET %文書 の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$nav
（当の~node~navigableは`~top-level辿可能$である場合は %文書 と同じになる。）
◎
↓</li>
			<li>
%~top-level生成元 ~LET %~top-level文書 の`生成元$doc
◎
↓</li>
			<li>
<p>
%訪問-済み履歴 に次の~entryを追加する
⇒
( %行先~URL, %生成元, `~siteを得する$( %~top-level生成元 ) )
◎
​add an entry to visited history recording the navigation’s destination URL, the origin of the page containing the link or script, and the (schemeful) site of the top-level site containing that page (which might be the same site as the previous origin).
</p>

<p class="note">注記：
これは、
次を~siteに許容する
⇒
利用者が~clickした~linkのうち，当の~siteの生成元に属するものに対し
— 言い換えれば、
当の~siteから任意の~siteへの~naviに対し —
その `visited$ps 情報を調べる
◎
Note: This allows a site to see :visited information for links that the user has clicked from anywhere in that site’s origin. In other words, any A -&gt; B navigation where the site is A.
</p>
			</li>
			<li>
<p>
~IF［
( %生成元【！from top-level frames or iframes？】, %~top-level生成元 )
は`同一-生成元$である
］
⇒
%訪問-済み履歴 に次の~entryを追加する
⇒
( %行先~URL, %行先~URL の`生成元$url, `~siteを得する$( %行先~URL の`生成元$url ) )
◎
Additionally, add an entry to visited history recording the destination’s URL, the destination’s origin, and the destination’s site. Do this only for navigations from top-level frames or iframes which are same-origin with their top-level frame.
</p>

<p class="note">注記：
これは、
次を~siteに許容する
⇒
当の~siteの自前の~pageについて，
どの~siteが当の~naviを起動したかに関わらず
— 言い換えれば、
任意の~siteから当の~siteへの~naviに対し —
その `visited$ps 情報を調べる
（それは、
当の~siteにより，すでに観測-可能である）。
◎
Note: This allows for a site to see :visited information about its own pages (which is already observable by the site) regardless of what site initiated the navigation to that page. In other words, any A -&gt; B navigation where the site is B.
</p>
			</li>
		</ol>

<p class="note">注記：
`~UAの~UI^emにより
— 例：［
~URL~barの中へ打込む／
~bookmarkを~clickする／
別の~programから~page中へ~linkを~dragする
］などにより —
直に誘発された~naviは、
%訪問-済み履歴 に~entryを`追加しない^emことに注意。
それでも、もちろん，~browserは、
訪問-済み~siteを他の目的
— 利用者が~URL~barの中へ打込むに伴い，示唆される~URLなど —
に利用するためとして，そのような~naviを記録できる。
◎
Note: Notably, direct navigations triggered by the user agent’s UI, such as typing into the address bar, clicking on bookmarks, or dragging a link from another program into the page, do not add a visited history entry. These can, of course, still add to the browser’s record of visited sites that it uses for other purposes, such as suggesting URLs as the user types into the URL bar.
</p>
	</li>
	<li>
<p>
ある`文書$【！~page】 %文書 に包含されている~link要素が［
`link$ps, `visited$ps
］どちらに合致するべきか決定するときは、
%訪問-済み履歴 内に ~AND↓ を満たす~entry %~entry が在る場合に限り，
`visited$ps に合致することを許容する：
</p>
		<ul>
			<li>
次の 2 つは`同等な~URL$である
⇒＃
%~entry[ 0 ],
当の~linkの行先~URL
</li>
			<li>
次の 2 つは`同一-生成元$である
⇒＃
%~entry[ 1 ],
%文書 の`生成元$url
</li>
			<li>
次の 2 つは`同じ~site$である
⇒＃
%~entry[ 2 ],
`~siteを得する$( %文書 の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$navの`生成元$doc )【！~top-level~site】
</li>
		</ul>
◎
When determining if a link element should match :link or :visited, only allow it to match :visited if the link’s destination, the origin of the page containing the link, and the top-level site containing the link match a tuple in visited history.
</li>
</ol>

<div class="note">
<p>注記：
履歴~entryに［
~naviを開始した~site【 %文書 】の生成元,
~top-level~site【 %~top-level文書 】の生成元【から得される`~site$】
］どちらも含めることは、
次に挙げるものなど，いくつかのアリな~privacy攻撃を防止する：
◎
The inclusion of both page origin and top-level site origin prevents several possible privacy attacks, such as:
</p>
<ul>
	<li>
~naviを開始した~siteの~URLしか~keyにしなかった場合、［
ある追跡~siteが複数の~site上の非可視な `iframe^e 内に埋込まれていて、
それは，最初の訪問に際して利用者~用に一意な~URLへの~naviを誘発する
］とするとき，追跡~siteは［
そのような多数の~linkを利用して、
後続な訪問に対し，どの~siteが訪問~済みかを調べる
］こともできる
— それは、
実質的に~webにまたがって利用者を識別する新たな “第三者-主体~cookie” になる。
~top-level~siteも履歴~entryの~keyにすることにより、
この情報は，異なる~siteにわたって共有され得ないようになる。
◎
If history entries were only keyed by the starting site’s URL, a tracking site could be embedded in a hidden iframe on multiple sites which triggers a navigation to a unique URL for a user on the first visit, and then uses many such links on subsequent visits to see which one had been visited, effectively becoming a new "third-party cookie" identifying the user across the web. By keying the history entry with the top-level site, this information can’t be shared across different sites.
</li>
	<li>
~top-level~siteの~URLしか~keyにしなかった場合、
敵対的な `iframe^e
— たぶん，広告の一部として~page内に含められたそれ —
は、
どの~siteが~top-level~siteから訪問-済みかを観測することもできる。
~linkの自前の~siteも履歴~entryの~keyにすることにより、
~top-level~siteの情報は，
非同一-生成元な `iframe^e の中へは “漏洩し得ない” ようになる。
◎
If history entires were only keyed by the top-level site’s URL, a hostile iframe, perhaps included in a page as part of an advertisement, could observe what sites were visited from the top-level site. By keying the history entry with the link’s own site, the top-level site’s information can’t "leak" into cross-origin iframes.
</li>
</ul>
</div>

	</section>
	<section id="changes">
<h2 title="Changes">変更点</h2>

<dl>
	<dt id="changes-2022-05">
<a href="~TR/2022/WD-selectors-4-20220507/">2022年 5月 7日 作業草案</a>
からの有意な変更点
◎
20.1. Changes since the 7 May 2022 Working Draft
• Significant changes since the 7 May 2022 Working Draft:
</dt>
	<dd>
`blank$ps を~risk下にあるとした。
~risk下にあった［
`read-write$ps, `has()$ps
］をそうでなくした。
◎
Marked :blank as at-risk and removed the at-risk status from :read-write and :has()
</dd>
	<dd>
`open$ps 疑似類を追加した。
( `7319$issue, `11039$issue ）
◎
Added :open pseudo-class. (Issue 7319, Issue 11039)
</dd>
	<dd>
`popover-open$ps 疑似類を追加した。
( `8637$issue ）
◎
Added :popover-open pseudo-class. (Issue 8637)
</dd>
	<dd>
`has()$ps の中では，`疑似要素$を許容しないようにした
— 当の疑似要素の定義により明示的に許容されない限り。
( `7463$issue ）
◎
Disallowed pseudo-elements from :has() unless explicitly allowed by the pseudo-element’s definition. (Issue 7463)
</dd>
	<dd>
`has()$ps の入子ngを許容しないようにした。
( `7344$issue ）
◎
Disallowed nesting of :has(). (Issue 7344)
</dd>
	<dd>
［
`has()$ps ／
`nth-child()$ps ／
`nth-last-child()$ps
］の選択子~引数は、
もはや寛容でない。
（ `7676$issue ）
◎
Made :has() and the selector argument of :nth-child()/:nth-last-child() no longer forgiving. (Issue 7676)
</dd>
	<dd>
`lang("")^pe と言語~tagを伴わない要素との照合-法を定義した。
( `6915$issue ）
◎
Defined matching of ::lang("") and of elements not tagged with a language. (Issue 6915)
</dd>
	<dd>
`視野~付き選択子$と`相対~選択子$の概念を完全に切り離した
（ `6399$issue ）
— それに伴い
⇒＃
“選択子を絶対~化する~algo” も除去した／
相対~選択子は，単に`~anchor要素$に基づいて照合するものと定義した。
◎
Untangled the concepts of "scoped" and "relative" selectors completely. (Issue 6399)
• Removed "absolutize a selector" as well, and just defined relative selector matching in terms of the anchoring element.
</dd>
	<dd>
`nth-child()$ps 【の引数】を複合-選択子に限っていた制限を外した（~~元に戻した）。
（ `3760$issue ）
◎
Reverted compound selector limitation on :nth-child(). (Issue 3760)
</dd>
	<dd>
`旧来の別名$selとして `-webkit-autofill^ps を定義した。
（ `7474$issue ）
◎
Defined :-webkit-autofill legacy selector alias. (Issue 7474)
</dd>
	<dd>
旧来の［
~colon 1 個だけを伴う疑似要素
］の構文を文法の中へ移動した。
（ `8122$issue ）
◎
Moved the legacy single-colon pseudo-element syntax into the grammar itself. (Issue 8122)
</dd>

	<dt id="changes-2018-11">
`2018年 11月 21日 作業草案＠~TR/2018/WD-selectors-4-20181121/$
からの有意な変更点は：
◎
20.2. Changes since the 21 November 2018 Working Draft
◎
Significant changes since the 21 November 2018 Working Draft:
</dt>
	<dd>
各種 選択子~profileを除去した
— 代わりに，【唯一，それらの差異に関わっていた】
`has()$ps は、
任意選択~であり，~risk下にあるものとした。
（ `3925$issue ）
◎
Removed the Selector profiles, marked :has() as optional and at-risk instead. (Issue 3925)
</dd>
	<dd>
`下位-疑似要素$, それに関係する各種用語を定義するため，
`下位-疑似要素§を追加した。
◎
Added § 3.6.4 Sub-pseudo-elements to define sub-pseudo-elements and related terminology.
</dd>
	<dd>
`defined$ps を追加した。
（ `2258$issue ）
◎
Added :defined. (Issue 2258)
</dd>
	<dd>
`modal$ps を追加した。
（ `6965$issue ）
◎
Added :modal. (Issue 6965)
</dd>
	<dd>
［
`fullscreen$ps, `picture-in-picture$ps
］を追加した。
（ `3796$issue ）
◎
Added :fullscreen and :picture-in-picture. (Issue 3796)
</dd>
	<dd>
~media再生~状態 疑似類として［
`seeking$ps,
`buffering$ps,
`stalled$ps
］を追加した。
（ `3821$issue ）
◎
Added :seeking, :buffering, and :stalled media playback state pseudo-classes. (Issue 3821)
</dd>
	<dd>
音響~状態 疑似類として［
`muted$ps, `volume-locked$ps
］を追加した。
（ `3821$issue, `3933$issue ）
◎
Added :muted and :volume-locked sound state pseudo-classes. (Issue 3821 and Issue 3933)
</dd>
	<dd>
`autofill$ps を追加した。
（ `5775$issue ）
◎
Added :autofill. (Issue 5775)
</dd>
	<dd>
`user-valid$ps を追加した。
（ `論点＠https://lists.w3.org/Archives/Public/www-style/2015Sep/0111.html$ ）
◎
Added :user-valid. (Discussion)
</dd>
	<dd>
［
`is()$ps ／
`where()$ps ／
`has()$ps ／
`nth-child()$ps ／
`nth-last-child()$ps
］は、
無効な選択子を包含していても，
それ自体は無効~化されないものと定義した。
（ `3264$issue ）
◎
Defined :is(), :where(), :has(), :nth-child(), and :nth-last-child() to not be themselves invalidated when containing an invalid selector. (Issue 3264)
</dd>
	<dd>
［
`nth-child()$ps ／ `nth-last-child()$ps
］内の各 選択子を
— 今の所は —
`複合-選択子$に制限した。
（ `3760$issue ）
◎
Limited selectors in :nth-child() and :nth-last-child() to compound selectors for now. (Issue 3760)
</dd>
	<dd>
文字大小区別による文字列~照合を
`INFRA$r にて定義される［
（文字列が）`一致-$する
］を参照することにより明確化した。
◎
Clarified case-sensitive string matching by referencing string identity as defined in [INFRA].
</dd>
	<dd>
~UAが供した仮入力~textであっても、
`placeholder-shown$ps は誘発されることを明確化した。
◎
Clarified that UA-provided placeholder text still triggers :placeholder-shown.
</dd>
	<dd>
明確さを得るため、
`focus-visible$ps の定義を書き直した。
◎
Rewrote :focus-visible definition for clarity.
</dd>
	<dd>
`文法$における覚え書き注記を次を述べる規範的な~textに切替えた
⇒
【`complex-selector$t 内の】
2 個の `compound-selector$t の合間に `combinator$t ~tokenが欠落なときは、
空白が要求される。
◎
Switched reminder note in the grammar section to normative text describing the requirement of whitespace between &lt;compound-selector&gt;s when a &lt;combinator&gt; token is missing.
</dd>

	<dt id="changes-2018-02">
`2018年 2月 2日 作業草案＠~TR/2018/WD-selectors-4-20180202/$
からの有意な変更点は：
◎
20.3. Changes since the 2 February 2018 Working Draft
◎
Significant changes since the 2 February 2018 Working Draft:
</dt>
	<dd>
詳細度 0 の選択子を `where()$ps と命名した。
（ `2143$issue ）
◎
Named the zero-specificity selector to :where(). (Issue 2143)
</dd>
	<dd>
`matches()$ps を `is()$ps に改称した。
（ `3258$issue ）
◎
Renamed :matches() to :is(). (Issue 3258)
</dd>
	<dd>
`empty$ps は、
空白のみの~nodeを【照合において】無視するものと定義し直した
（ `1967$issue ）
◎
Redefined :empty to ignore white-space–only nodes. (Issue 1967)
</dd>
	<dd>
`blank$ps は、
内容が空な要素ではなく空な利用者~入力を表現するものと定義し直した
（ `1283$issue ）
◎
Redefined :blank to represent empty user input, rather than empty elements. (Issue 1283)
</dd>
	<dd>
［
`is()$ps ／ `has()$ps ／ `nth-child()$ps
］の詳細度は、
合致した選択子~引数に依存しないように変更した。
（ `1027$issue ）
◎
Changed the specificity of :is(), :has(), and :nth-child() to not depend on which selector argument matched. (Issue 1027)
</dd>
	<dd>
`drop()^ps 疑似類を落とした
— ~HTMLも関係する特能を落としたので。
（ `2257$issue ）
◎
Dropped the :drop() pseudo-classes since HTML dropped the related feature. (Issue 2257)
</dd>
	<dd>
属性~選択子に文字大小を区別する~flag `s^css を追加した。
（ `2101$issue ）
◎
Added the case-sensitive flag s to the attribute selector. (Issue 2101)
</dd>
	<dd>
`focus-visible$ps についてのさらなる指導を追加した。
◎
Added further guidance on :focus-visible.
</dd>
	<dd>
`§ 廃用にされたが要求される，~Web互換性のための構文解析-法＠#compat$
を付録に追加した
（ `-webkit-^pe 疑似要素の過去互換~用の構文解析を定義する）。
（ `3051$issue ）
◎
Added Appendix B: Obsolete but Required -webkit- Parsing Quirks for Web Compat defining ::-webkit- pseudo-element parsing quirk. (Issue 3051)
</dd>
	<dd>
空白が どこに許容されるか明確化するよう，文法~規則を書き直した
（`文法§を見よ）。
◎
Rewrote grammar rules about where white space is allowed for clarity. (See § 18 Grammar.)
</dd>

	<dt id="changes-2013">
`2013年 5月 2日 作業草案＠~TR/2013/WD-selectors4-20130502/$
からの有意な変更点は：
◎
20.4. Changes since the 2 May 2013 Working Draft
◎
Significant changes since the 2 May 2013 Working Draft include:
</dt>
	<dd>
次の疑似類を追加した
⇒＃
`target-within$ps,
`focus-within$ps,
`focus-visible$ps,
`playing$ps,
`paused$ps
◎
Added the :target-within, :focus-within, :focus-visible, :playing, and :paused pseudo-classes.
</dd>
	<dd>
`matches()$ps の “詳細度 0 版” を追加した。
その名前は、
まだ仮のものだが。
【が、現時点では `where()$ps に~~決着した~~模様（上述した変更点）。】
◎
Added a zero-specificity :matches()-type pseudo-class, with name TBD.
</dd>
	<dd>
~subject指示子 `!^css （ `subject indicator^en ）の特能を `has()$ps に置換した。
◎
Replaced subject indicator (!) feature with :has().
</dd>
	<dd>
選択子［
`nth-match()^ps ／
`nth-last-match()^ps
］を［
`:nth-child(… of %S)^css ／
`:nth-last-child(… of %S)^css
］に置換した。
◎
Replaced the :nth-match() and :nth-last-match() selectors with :nth-child(… of selector) and :nth-last-child(… of selector).
</dd>
	<dd>
次の疑似類を `drop()^ps に変更した
⇒＃
`active-drop-target^ps,
`valid-drop-target^ps,
`invalid-drop-target^ps
◎
Changed the :active-drop-target, :valid-drop-target, :invalid-drop-target with :drop().
</dd>
	<dd>
内容が［
空／空白のみ
］である要素に合致する選択子についての論点を素描した。
（ open 課題（ `1967$issue ）を見よ。）
◎
Sketched out an empty-or-whitespace-only selector for discussion (See open issue.)
</dd>
	<dd>
`user-error^ps を `user-invalid$ps に改称した。
（ <a href="https://www.w3.org/mid/CADhPm3v+WfeGQfBwwx8QBuiOjn2k38V_DcKW17Cm81VgZb1nbQ@mail.gmail.com">論点</a>
を見よ。）
◎
Renamed :user-error to :user-invalid. (See Discussion)
</dd>
	<dd>
`nth-column()^ps ／ `nth-last-column()^ps
を
`nth-col()$ps ／ `nth-last-col()$ps
に改称した
— `column$pe 疑似要素との混同を避けるため。
◎
Renamed :nth-column()/:nth-last-column() to :nth-col()/:nth-last-col() to avoid naming confusion with a potential ::column pseudo-class.
</dd>
	<dd>
関数-形でない `local-link$ps 疑似類は、
素片も織り込むよう変更した。
◎
Changed the non-functional form of the :local-link pseudo-class to account for fragment URLs.
</dd>
	<dd>
関心が欠如しているので、
関数-形の `local-link()^ps 疑似類と参照~結合子は，除去した。
◎
Removed the functional form of the :local-link() pseudo-class and reference combinator for lack of interest.
</dd>
	<dd>
選択子の文法を`~CSS値~定義~構文$を利用して書き直した。
◎
Rewrote selectors grammar using the CSS Value Definition Syntax.
</dd>
	<dd>
`視野~付き選択子$から`相対~選択子$を分け隔てた。
これらは独立に呼出され得る，異なる概念なので。
◎
Split out relative selectors from scoped selectors, as these are different concepts that can be independently invoked.
</dd>
	<dd>
<p>
`~AnB＠~CSSSYN#anb-production$
小構文の定義を CSS Syntax 仕様に移動した。
◎
Moved definition of &lt;An+B&gt; microsyntax to CSS Syntax.
</p>
<p class="issue">
意味論上の定義については，おそらく ここに戻されるべきである。
◎
Semantic definition should probably move back here.
</p>
	</dd>
	<dd>
<p>
次の新たな節を追加した：
◎
Added new sections:
</p>

		<ul>
			<li>
<p>
`~data~model§。
◎
§ 3.2 Data Model
</p>

<p class="issue">
~XML用の~treeを定義する必要がある。
◎
Need to define tree for XML.
</p>
			</li>
			<li>
<p>
`~API~hook§。
◎
§ 19 API Hooks
</p>

<p class="issue">
この仕様の以前の~versionは、
<a id="evaluate-a-selector"></a>
<a id="evaluating-selectors">§ 選択子の評価-法</a>
を定義していたが、
その節はもう無い。
その節を参照している仕様は、
`~treeに対し選択子を照合する$~algoを参照するべきである。
◎
Note that earlier versions of this section defined a section on evaluating a selector, but that section is no longer present. Specifications referencing that section should instead reference the algorithm to match a selector against a tree.
</p>
			</li>
		</ul>
	</dd>
	<dd>
`matches()$ps,
`not()$ps
の中の結合子に対する制約を除去した。
`論点＠https://lists.w3.org/Archives/Public/www-style/2014Jan/0607.html$
を見よ。
◎
Removed restriction on combinators within :matches() and :not(); see discussion.
</dd>
	<dd>
`選択子~list$の`詳細度$を定義した。
(Why?)
◎
Defined specificity of a selector list. (Why?)
</dd>
	<dd>
`lang()$ps 値は、
~asteriskを孕んでいる場合には，引用符で括ることが要求される。
引用符が不要になるのは、
~CSS識別子になる言語~codeに限られる。
◎
Required quotes around :lang() values involving an asterisk; only language codes which happen to be CSS identifiers can be used unquoted.
</dd>
	<dd class="note">注記：
2018年 2月 1日 草案は、
不作為に，まだ完遂していない作業の~commitを含んでいた。
この~commit は 2018年 2月 2日に復帰された。
【！ ＊？ (and fixed some links because why not) 】
◎
Note: The 1 February 2018 draft included an inadvertent commit of unfinished work; 2 February 2018 has reverted this commit (and fixed some links because why not).
</dd>

	<dt id="changes-2012">
`2012年 8月 23日 作業草案＠~TR/2012/WD-selectors4-20120823/$
からの有意な変更点は：
◎
20.5. Changes since the 23 August 2012 Working Draft
◎
Significant changes since the 23 August 2012 Working Draft include:
</dt>
	<dd>
`placeholder-shown$ps
疑似類を追加した。
◎
Added :placeholder-shown pseudo-classes.
</dd>
	<dd>
`matches()$ps,
`not()$ps
に対する一部の制約を解放した。
◎
Released some restrictions on :matches() and :not().
</dd>
	<dd>
選択子~profile
`fast^en, `complete^en
（今は `live^en, `snapshot^en と呼ばれる）を定義した【が今や除去された】。
◎
Defined fast and complete Selectors profiles (now called “live” and “snapshot”).
</dd>
	<dd>
`matches()$ps をより良く取扱うよう，`詳細度$の定義を改善した。
◎
Improved definition of specificity to better handle :matches().
</dd>
	<dd>
文法を更新した。
◎
Updated grammar.
</dd>
	<dd>
`~AnB＠~CSSSYN#anb-production$
記法の定義を整理した。
◎
Cleaned up definition of &lt;An+B&gt; notation.
</dd>
	<dd>
`相対~選択子$の定義を追加した。
`scope-constrained^en を `scope-filtered^en に変更した
— `scope-contained^en と混同され易いので。
◎
Added definition of scope-relative selectors, changed scope-constrained to scope-filtered for less confusion with scope-contained.
</dd>
	<dd>
`local-link()^ps 疑似類は、
尾部の~slashを無視するようにした。
◎
The :local-link() pseudo-class now ignores trailing slashes.
</dd>

	<dt id="changes-2011">
`2011年 9 月 29日 作業草案＠~TR/2011/WD-selectors4-20110929/$
からの有意な変更点は：
◎
20.6. Changes since the 29 September 2011 Working Draft
◎
Significant changes since the 29 September 2011 Working Draft include:
</dt>
	<dd>
RFC 4647 による言語~変種の取扱いを追加した。
◎
Added language variant handling per RFC 4647.
</dd>
	<dd>
視野~付き選択子を追加した。
◎
Added scoped selectors.
</dd>
	<dd>
`user-error^ps （今は `user-invalid$ps と呼ばれる）を追加した。
◎
Added :user-error (now called :user-invalid).
</dd>
	<dd>
`valid-drop-target^ps を追加した。
◎
Added :valid-drop-target.
</dd>
	<dd>
`~col結合子$を `//^css から `||^css に変更した。
◎
Changed column combinator from double slash to double pipe.
</dd>

	<dt id="changes-level-3">
`~level 3$ からの追加は：
◎
20.7. Changes Since Level 3
◎
Additions since Level 3:
</dt>
	<dd>
`not()$ps を，`選択子~list$を受容するように拡張した。
◎
Extended :not() to accept a selector list.
</dd>
	<dd>
`is()$ps, `where()$ps, `has()$ps
を追加した。
◎
Added :is() and :where() and :has().
</dd>
	<dd>
`scope$ps を追加した。
◎
Added :scope.
</dd>
	<dd>
`any-link$ps, `local-link$ps
を追加した。
◎
Added :any-link and :local-link.
</dd>
	<dd>
`時系列 疑似類§を追加した。
◎
Added time-dimensional pseudo-classes.
</dd>
	<dd>
`target-within$ps, `focus-within$ps, `focus-visible$ps
を追加した。
◎
Added :target-within, :focus-within, and :focus-visible.
</dd>
	<dd>
`dir()$ps を追加した。
◎
Added :dir().
</dd>
	<dd>
`lang()$ps を，~wildcard照合, 言語~codeたちが成す~listを受容するように拡張した。
◎
Expanded :lang() to accept wildcard matching and lists of language codes.
</dd>
	<dd>
`nth-child()$ps を，`選択子~list$を受容するように拡張した。
◎
Expanded :nth-child() to accept a selector list.
</dd>
	<dd>
`CSS3UI$r から各種 入力~選択子を併合した上で、
`indeterminate$ps を追加し直した
◎
Merged in input selectors from CSS Basic User Interface Module Level 3 and added back :indeterminate.
</dd>
	<dd>
`blank$ps, `user-invalid$ps
を追加した。
◎
Added :blank and :user-invalid.
</dd>
	<dd>
`格子構造~選択子§を追加した。
◎
Added grid-structural (column) selectors.
</dd>
	<dd>
属性~値を［
文字大小無視, 文字大小区別
］で照合する~flagを追加した。
◎
Added case-insensitive / case-sensitive attribute-value matching flags.
</dd>
</dl>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgements">謝辞</h2>

<p>
~CSS~WGは、
この仕様の基礎を成している仕様も含め，
年月に渡り，これまで各~levelの~Selectors仕様に貢献された すべての方々に感謝する。
特に、
~Selectors~level 4 に貢献された次の方々に，特別な謝意を
⇒
`L. David Baron, Andrew Fedoniouk, Daniel Glazman, Ian Hickson, Grey Hodge, Lachlan Hunt, Anne van Kesteren, Jason Cranford Teague, Lea Verou^en
◎
The CSS working group would like to thank everyone who contributed to the previous Selectors specifications over the years, as those specifications formed the basis for this one. In particular, the working group would like to extend special thanks to the following for their specific contributions to Selectors Level 4: L. David Baron, Andrew Fedoniouk, Daniel Glazman, Ian Hickson, Grey Hodge, Lachlan Hunt, Anne van Kesteren, Jason Cranford Teague, Lea Verou
</p>

	</section>
	<section id="privacy">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<ul>
	<li>
`visited$ps 疑似類は、［
利用者が，以前に どの~siteを訪問したか
］についての情報を公開し得る
— ~UAが［
どの要素が合致したか露呈する情報
］を~scriptに~~漏らさない~~労を~~怠った場合には。
◎
The :visited pseudo-class can expose information about which sites a user has previously visited, if the UA is not careful to screen from scripting any information that would reveal which elements match it.
</li>
	<li>
`autofill$ps 疑似類は、［
利用者が当の~formと それまでにヤリトリしたかどうか
］を公開し得る。
とは言え、
同じ情報は，［
当の~form全体が，どれだけ素早く埋尽くされたか観測する
］ことでも導出し得る。
◎
The :autofill pseudo-class can expose whether a user has interacted with this form before; however the same information can be derived by observing how quickly the form is filled out.
</li>
</ul>

	</section>
	<section id="security">
<h2 title="Security Considerations">~securityの考慮点</h2>

<p>
`~privacyの考慮点＠#privacy$は、
~securityにも影響するものと見なすこともできる。
◎
The Privacy Considerations could also be considered to affect Security.
</p>

	</section>
</main></div>