問題はすぐに生じるかもしれません：しかし、CSS 3が完成したのはなぜですか。 CSS 2.1以降、新しい仕様を承認するプロセスが変更されたことを思い出してください。3番目のバージョンは、単一の標準ではなく、モジュールと呼ばれるドキュメントのコレクションです。 それぞれは、下位互換性を維持しながら、2番目のバージョンから独立して開発され、推奨事項として承認されます。 通常、モジュールは相互に依存していませんが、セレクタモジュールや名前空間など、いくつかのモジュールには依存関係があります。
したがって、標準の4番目のバージョンでの作業は、3番目のバージョンの開発と連動することができます。
主な革新を検討してください。 それらのいくつかは、Webドキュメントのレイアウトの開発動向を常に把握したい開発者にとって非常に興味深いものです。
レベル4セレクターの仕様には 、レベル3とかなりの数の違いがあります。これは最初のドラフトにすぎないため、ブラウザーでの実装の推奨状況を含む最終結果は大きく異なる可能性があります。
他の仕様から追加された要素もあれば、セレクターの仕様に含まれていない要素もあります。
擬似要素
最初に目を引くのは、仕様に疑似要素が含まれていないことです。 どうやら将来的には、他のモジュールで説明されます。
擬似クラス
CSS 3のユーザーインターフェイス状態の擬似クラス：基本ユーザーインターフェイスモジュールが追加されました。 それらの値は、グラフィカルインターフェイス要素の状態を示します。チェックボックスの有無、入力するかどうか、入力するかどうか、
:read-write
および
:read-only
は、HTML5で入力フォームを構成するために必要な詳細です。 どうやら、1つのモジュール内の擬似要素を除くすべてのセレクターを収集することが決定されました。
既存のセレクターの変更
CSS 3では、否定
:not
疑似クラスではない単純セレクター（疑似クラス、タグ、識別子、クラス、パラメーターセレクター）にのみ適用できます。 疑似要素と
ul li
や
ul>li
などの組み合わせはサポート
ul>li
おらず、否定の疑似クラスを埋め込むことはできませんでした
:not(:not(...))
into into。
CSS 4では、これらの制限ははるかに弱くなります：否定擬似クラスは、セレクターのリスト、複雑なセレクターに適用できるようになりました。 擬似要素とネストされたネガはまだ禁止されています。
新しい擬似クラス
Webマスターの希望とブラウザーの作成者の成果に基づいて作成されたいくつかの新しい要素があります。
:matches()
:matches()
、Mozilla擬似クラス
:moz-any()
に非常に似ています。 多数の同様のセレクターを選択する必要がある場合、その使用は正当化されます。 たとえば、
li a:link, li a:hover, li a:visited, li a:focus
代わりに、
li a:link, li a:hover, li a:visited, li a:focus
li a:matches(:link, :hover, :visited)
を指定するだけで十分です。 複雑なセレクタ、添付ファイル、および使用
:not
禁止されて
:not
。
アライメント擬似クラス:dir
名前付き擬似クラスを使用すると、テキストの方向に基づいて要素を選択できます。 リスト
rtl
（右から左、アラビア語およびヘブライ語）および
ltr
（左から右）。 他の値は無効ではありませんが、それらのアクションは設定されていません。将来、新しい値が追加されます（おそらく、上から下、下から上になります）。
ハイパーリンクの新しい擬似クラス
疑似クラス
:any-link()
は、出席に関係なくリンクを指します。 一度訪れたリンク（擬似クラス
:link
）はこれ以上訪問されていないと見なされないため、同様の要素の入力が必要でした。これは、両方の状態に単一のスタイルを指定する必要がある場合に役立ちます。 アイテムには、最適な名前を選択できる可能性が示されています。
ローカルリンクの擬似クラス
:local-link
指します。 単純に使用すると、かっこで囲まれた式のない
:local-link
は、現在のページを指す要素を指します。つまり、フラグメントアンカーのないドキュメントURLと正確に一致します。 括弧内の数字は、URL内の一致する要素の数を示します。たとえば、参照によるドキュメント
www.example.com/foo/bar/baz
www.example.com/foo/bar/baz
a:local-link(0)
は同じドメインへのリンクを指します
www.example.com
www.example.com
、
a:local-link(1)
-ドメインごとおよびURLの最初のセグメント
www.example.com/foo
www.example.com/foo
ドメインおよびURLの最初の2つのセグメントへ
www.example.com/foo/bar
www.example.com/foo/bar
一時的な擬似クラス
3つの時間依存の擬似クラスが登場しました
:past
:current
、および
:future
、時間依存の再生またはタイムレーン、つまり、HTMLドキュメントの口頭での複製の手段に関連付けられています。 したがって
:current
は処理される要素を示し、現在再生中のフラグメントを選択することを可能にします
:past
は
:past
に既に処理された要素を示します
:future
は将来処理される要素を強調表示します。 U
:current
は、括弧で囲まれた値を取るバージョンがあります。
要素ツリーの新しい擬似クラス
このドキュメントでは、2つの新しい類似の擬似クラスについて説明します。：
:nth-match
および
:nth-last-match
、その入力値は
:nth-child
および
:nth-last-child
と同じ：an + bの同じ表現、およびキーワードまたは文字列結果のサブセットを選択できるセレクタ。 仕様から、アイデアを理解することは例を使用するほど簡単ではありません。
button:nth-match(even of .active)
セレクターがあると仮定し
button:nth-match(even of .active)
。
button:nth-child(even)
対照的に
button:nth-child(even)
最初にクラス
active
持つ要素のサブセットを決定し、その後で偶数要素を分離します。
テーブル構造の擬似クラス
これらは
:nth-column()
:column()
:nth-column()
、および
:nth-last-column
です。 HTMLでは、セルは行にリストされ、
tr
タグで区切られ、列に対するセルの比率はリストの順序によって暗示されます。 したがって、列に属するセルのスタイルに基づいてセルのスタイルを設定するために、1つ以上のセレクターに適用できる疑似クラス
:column
が導入されています。 次のドラフトの例では、セル
C
、
E
および
D
の黄色を設定しています。
：列（列選択）{背景：黄色; }
<表>
<col span = "2">
<col class = "selected">
<tr> <td> A <td> B <td> C
<tr> <td span = "2"> D <td> E
<tr> <td> F <td span = "2"> G
</ table>
ドラフト
:nth-column()
および
:nth-last-column
は、既存のものと同じ方法で引数を受け入れます
:nth-child
または
:nth-last-child
、つまり数値、
an+b
、
even
および
odd
形式の式。 例
:nth-column(odd)
は、奇数列に属するすべてのセルを選択します。
祖先セレクターまたはオブジェクトセレクター
前の要素の必要性がときどき手に負えないように思われる場合は、ずっと前に次の要素を導入することが提案されました。
CSSプロパティは常にリスト内の最後の要素に適用されています
ul li.selected
は、選択されたクラスを持つリスト内の要素を指します。 ただし、リストにネストされている要素のプロパティに基づいてリスト全体のスタイルを設定する方法はありません。
ドラフトでは、プロパティを適用する要素を選択する方法についても説明しています。 現時点では、ドル記号$は、メーリングリストでの議論が可能ですが、目的のアイテムに追加することが提案されているポインターで選択されています。
selected
クラスを持つ要素を持つリストスタイルを設定する必要があるとします。 オブジェクトセレクタを使用すると、これを簡単に行うことができます。
$ul li.selected {
background: white;
}
これは、ドキュメント「 レベル4セレクタ 」の現在のドラフトであり、その状態は大幅に変更される可能性があり、今後変更される予定であり、個々のフラグメントの意味全体を理解することは依然として困難です。
W3CワーキンググループのメンバーであるDavid StoryとWebmonkey.comの著者であるScott Gilbertsonの出版物に基づいています。