隣接とは？/ レイク
[ 419] セレクタ - CSS2リファレンス
[引用サイト] http://hp.vector.co.jp/authors/VA022006/css/selector.html
|
この文書では，CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ，文書ツリーの各要素に適用されるスタイル規則を決定します。 CSSではパターンマッチ（Pattern matching）の規則を用いて，文書ツリーの各要素に適用されるスタイル規則を決定します。セレクタと呼ばれるこれらのパターンは単純な要素型名のみのものから，複雑な前後関係（たとえば子供や子孫，兄弟など）を照合できるものまで多岐に亙ります。パターン内に示された全条件がある要素と一致するとき，そのセレクタと要素はマッチ（match）していると謂います。 内容が c という言語で書かれているE要素にマッチする。（言語情報をどう指定するかは文書言語に依って異る） 要素とタグを峻別すべきです。たとえばPタグにスタイルを適用するという具合に，"要素" と言うべき場合でも，"タグ" と云う人もいます。しかし，タグは文書を構成する "要素" を明示する目印に過ぎないのであり，スタイルは要素に適用されるのです。 そうでなければHTML 4のソース文書において，要素の開始タグと終了タグが共に省略できる場合の説明がつきません。このような要素はたとい明確にマークアップが為されてなくとも，暗示的に存在しており，User Agentに拠って常に解析されるのです。 文書をレンダリングするUser Agentはソース文書内のタグづけから各要素を解析し，文書ツリーを組立てます。そしてCSSの重要な特徴であるカスケード処理と継承に基いて，文書ツリー内の各要素に適用するスタイル規則を決定します。（see 処理モデル） 単純（simple）セレクタとは全称セレクタまたはタイプセレクタの何れかと，その直後にゼロ個以上の属性セレクタ，クラスセレクタ，IDセレクタ，疑似クラスが任意の順序で続いたものです。これら構成条件のすべてが一致すると単純セレクタはマッチします。 あるセレクタとマッチする文書ツリー内の要素群を，そのセレクタの主体（subjects）と呼びます。単一の単純セレクタから成るなら，その必要条件を満たす全要素にマッチします。別の単純セレクタや結合子を連結して照合の必要条件を増やしても，その主体は常にセレクタ最後尾の単純セレクタにマッチする要素群の部分集合になります。ひとつの疑似要素は，最後にある単純セレクタの末尾に連結できます。 全称セレクタはアスタリスクで示され，あらゆる要素型――つまり，文書ツリー内のどんな要素でもマッチします。 全称セレクタが単純セレクタのただ一つの構成素ではないのなら，アスタリスクの表記を省略しても構いません。 （補足：全称セレクタは屡々，ブラウザが持つデフォルトスタイルの初期化を意図して，スタイルシートの冒頭で用いられます。） タイプセレクタは文書言語の要素型名――つまり，文書ツリー内のその名前である凡ての要素とマッチします。 【註】：読者に諂ってかよく "タグ名" と云われますが，不適切です。タグというのは，文書の構成要素を明示するための仕組であって，その符号には定められた要素型の名称を用います。スタイルの適用先となるのは，タグづけから解析された要素です。 子孫セレクタは，ある特定要素の子孫（下位の階層）にあたる要素にマッチします。このセレクタは空白類文字で区切られた複数の単純セレクタから構成されます。たとえば A B という形の場合，Aを祖先要素とする任意のB要素にマッチします。 CSS2の属性セレクタには次に提示する四種類があり，これらは単純セレクタの直後にいくつでも連結できます： HTMLまたはXHTML文書において分類をしめすclass属性とマッチングします。これは属性セレクタの~=という表記法と等価であり，その代りとしてピリオド（.）を使用します。つまりピリオドとその直後につづくクラス名から成り，その名前は次から構成されねばなりません： class属性には，単なる装飾を目的とした名前をつけるべきではありません――たとえばredなどの如く。なぜなら "赤" から "別の色" に変更しようと考えたときに矛盾が生じてしまうからです。これでは色変更の度にマークづけもいぢる羽目になります。CSS2仕様書の設計原則で述べられているとおりスタイルシートの変更は，マークづけに殆ど影響を与えないで容易に行われるべきという原則を遵守すべきです。 CSSではclass属性が非常に大きな力を持っています。つまり文書著者は，体裁にあまり関係のない要素（div・span要素）をベースにしてそれらにクラス属性でスタイル情報を与えれば，独自の構造化言語を “疑似的に” 設計できると考えられます。しかしそれらに依存した文書設計は推奨されません。普遍的な情報共有を目指すべきHTMLの水準を低下させるからです。 文書言語は一意型に宣言された属性を持つ場合があります； たとえばHTMLなら汎用属性のid属性のこと。一意属性の特徴は，その属性をもつ要素をどうふたつ選び出しても同じ名前を持てない事であり，文書言語にかかわらず要素を一意に識別できます。 要約するとCSSの一意セレクタというのは，ある要素が持つ一意属性の識別子に基いたマッチングを行います。その構成はハッシュ（#）とその直後につづく一意属性値からなります。HTML 4文書なら，ハッシュにつづく名前を次の文字から構成させねばなりません： さらにid属性はリンクの終点としても機能するので，その点にも留意しなければなりません。（see ハイパーリンク） また，ユーザの操作で要素が疑似クラスを獲得したり，消失したりするという点で，疑似クラスは動的と言えます。 疑似クラスはセレクタ内において何処の単純セレクタにも自由に連結できますが，疑似要素についてはセレクタ最後尾にある単純セレクタの末尾に現れねばなりません。互いに排他的な疑似クラスもありますが，単一要素について同時に適用できるものもあります。 疑似クラスを持つ規則が互いに競合しあう場合には，通常のカスケード順序において導かれた結果に従います。 いくつかの例外はあるが、クリックできることを最大限に訴えかけるためには、テキストリンクに色をつけてアンダーラインを引くべきだ。 インタラクティヴな（対話的にユーザの操作を受けつけるメディアである）環境では，ユーザからの働きかけに応じて，しばしばレンダリングを変化させます。CSS2ではその一般的な事例として，次のような三種類の疑似クラスが提供されています： :hover疑似クラスは，ユーザの操作で要素を（マウスなどのポインティング-デヴァイスで）指し示しており，かつアクティヴではない時に適用されます。たとえば視覚系ブラウザであれば，要素に拠って生成されたボックスにカーソルを重ね合せた時に適用できます。 :active疑似クラスは，ユーザからの働きかけを受けてアクティヴ状態にある要素に適用されます。たとえば，マウスのボタンを押してから放すまでの間などです。あるいはキーボードからの，具体的にはEnterキーなどからの，働きかけにも反応するかもしれません。 :focus疑似クラスは，ユーザの操作によりフォーカスされている要素に適用されます。（特定のキーボード操作によりフォーカスを受けているか――典型的な環境ではTabキーの操作が多い――もしくはフォームフィールドに入力できる状態の時に適用されます。） 後者の規則が持つセレクタは，テキストエリアにフォーカス時（入力可能な状態）で，かつホヴァー時にマッチします。 User Agentはこれら疑似クラスの変化にともなって，現在表示している文書を再フローさせる必要はない，とされています。たとえばホヴァー時にある始点アンカーのフォントサイズを通常時より大きく設定すると，この指定はユーザ操作でアンカーを指し示した瞬間に文字列の位置がずれることが豫見されます。もしこういう状況におかれたなら，UAは再フローを避けるために対応するスタイル規則を無視するかもしれません。 【註】：これらダイナミック疑似クラスは，あらゆる要素について考えることが可能ですが，実際にどの要素がどのダイナミック疑似クラスに属するのか，どんな状態がどのダイナミック疑似クラスに対応するのか，CSSでは明確にされず，UAの実装に委ねられています。 文書言語で各要素の自然言語――日本語・英語などのように，話したり書いたり身振りなどによって表現される，人間が意志を伝達するのに用いる言語――の指定方法が決っている場合，CSS2からはその言語情報に基いたマッチングを行えます。 これは単に主コードだけでもマッチし，ハイフン区切りの副コードを附けても構いません。文書言語に依っては，属性セレクタの |= を用いた方法でもマッチングできます。 最初の子供を導き出すとき，CSSでは先頭のテキストノード（匿名ボックス）を子供として数えません。すなわち，最初の子供要素に先行するテキストが存在しているにしても，それと照合される訣ではありません。あくまでも最初の子供要素とマッチングを行います。 すなわち，あるセレクタの主体にふたつ以上の疑似要素を同時に適用させたい場合，別々のセレクタに分離してその末尾に各疑似要素を連結させる必要があります。 疑似要素の処理段階において，文書ツリーは変更されません。特にスタイルで生成された内容が，たとえば文書の再解析の目的で，文書言語のプロセッサにフィードバックされる事はありません。すなわち，CSSの整形構造と文書ツリーとでは情報量に差違が生じます。 これは原則として先頭行の先頭文字に対して適用されるのですが，時には二文字以上にも適用され得ます。たとえば先頭の約物につづく文字，もしくは言語の慣習で特別の組合せに意味のある文字列も，:first-letter疑似要素内に含まれるべきです。 （補足：もし先頭行の内容が画像もしくはインラインの表要素から始るなら，この疑似要素は効果を齎しません。） 要素に生成されるオブジェクト（ボックスや画像）を整形する際には，生成内容もその要素の一部として扱われます。:before, :after疑似要素は自身に連結された要素から継承される凡ゆるプロパティの値を継承します。継承されないなら初期値を採ります。 |
レイクのサイトです。
