CSS3

関連して覚えたいこと

ADD20080115
jQueryのセレクタについては、本家でちゃんと説明していた。
Selectors | jQuery API Documentation
引用：IBMのjQueryを使ってAjax開発を単純化する　より


XPath は、文書中の要素を見つけるための強力な構文です。XPath は CSS とは少し異なり、CSS では行えない、いくつかのことを行うことができます。例えば、すべてのチェック・ボックスの親要素に枠を追加するためには、次のように XPath の /.. 構文を使います。

$("input:checkbox/..").css('border', '1px solid #777');

jQuery には、CSS あるいは XPath にはないセレクターが追加されています。例えば、テーブルを読みやすくするために、通常はテーブルの奇数行あるいは偶数行ごとに別のクラス名を付加します (これはテーブルのストライピングとして知られています)。しかし jQuery には :odd 疑似セレクターがあるおかげで、これを簡単に行うことができます。下記の例では、テーブルのすべての奇数行の背景を、striped クラスを使って変更しています。

$('table.striped > tr:odd').css('background', '#999999');

これらを見ると、jQuery のセレクターの能力を使って、どのようにコードを単純化できるのかがわかると思います。どのように要素を選択したいかによらず、あるいはどれほど明白な定義か、どれほどあいまいな定義かによらず、1 つの jQuery セレクターを使って要素を定義できる方法を見つけられるはずです。どんな要素を選択したいとしても、それがどれほど具体的もしくは曖昧でも、1 つの jQuery セレクターを使ってその要素を明らかにする方法を見つけられるはずです。

css3って　なんですか？


CSS1とCSS2の両方において、テキストのフォーマット処理は、たとえば、テキストの装飾、テキストの配置や、文字のスペース処理のような、単純な効果に限られていた。

しかしながら、国際的な印刷の体裁は、特別なワークアラウンドやグラフィックスを使わなければ成しえないフォーマット処理の種類を含んでいる。

既存のテキストに関連したプロパティとともに、この文書は、そのようなフォーマット処理を表現するために、いくらかの新しいCSSのプロパティを提供する。
…

ということらしい。

ドキュメントを作る時、全角文字と、半角文字が混在していたり、大体日本語は、縦書きでしょ。みたいなところに、やっと気づいて　「標準に加えようか、考え中です。」ということか

標準化団体

W3C Cascading Style Sheets home page Cascading Style Sheets
W3C working draft CSS Text Module Level 3/邦訳（古い）
W3C セレクタ Selectors Level 3
進捗表 Cascading Style Sheets Current Work CSS current work & how to participate


※working draftなんチャラって、ナンスカ？

ブラウザサポート状況

CSS Selectors Test CSS3 . Info - All you ever needed to know about CSS3
UAサポート状況 Web Browser CSS Support

スタイルの指定方法について

jQueryのセレクタについては、本家でちゃんと説明していた。
Selectors | jQuery API Documentation

スタイルの指定の仕方、一般的なクラスセレクタや、IDセレクタは、省いています。

擬似要素、擬似クラスは、ブラウザの実装により、表現が必ずしも実行可能とは限りません。
jQueryを使っての、指定などに使えそうなので、表現方法をまとめています。あらかじめご了承ください。

属性セレクタcss2

e[class] class属性を持つe要素
e[foo="bar"] 属性名foo値barを持つe要素
e[foo~="bar"] 属性名foo値barを含む（値単位）e要素
e[foo~="bar"] 属性名foo値barを含む（値の一部にでも含めば）e要素
e[foo^="bar"] 属性名foo値barで始まるe要素
e[foo$="bar"] 属性名foo値barで終わるe要素
e[hreflang|="ja"] ???

擬似要素

e == 要素です。

e::first-line e要素の1行目
e::first-letter e要素の1文字目
e::selection e要素の選択状態
e::before e要素の前
e::after e要素の後ろ

※擬似要素の表現は、css３で、::コロン2ヶになったようです。
擬似クラスは、コロン1ヶのままで、擬似クラスか要素かを明確にしたいということらしい。

擬似クラス

e == 要素です。

e:root e要素のルート要素の適用
e:nth-child(n) e要素の出現順位(1から始めるようです）指定付き*1
e:nth-last:child(n) 上と同様最後から数える。
e:nth-of-type(n) e要素の、同じエレメントでの出現順位を指定
e:nth-last-of-type(n) 上と同様最後から数える
e:first-child 最初の子要素のe要素
e:last-child 最後の子要素のe要素
e:first-of-type e要素の中で最初の子要素
e:last-of-type e要素の中で最後の子要素
e:only-child 兄弟要素を持たないe要素
e:only-child-type e要素の兄弟要素を持たないe要素
e:empty テキストノードさえ持たない

リンク擬似クラス

e:link
e:visited

ダイナミック擬似クラス

e:active
e:hover
e:focus

ターゲット擬似クラス

アンカーリンク（同一ページ内リンク）

#hoge

リンクがアクティブになった時、移動先(同一ページ)のスタイルを指定できる。

*p3*:target{
 etc
}

言語擬似クラス

e:lang(ja){

}

e要素のうち、lang属性がja担っているものにスタイルを与える。

UI要素状態擬似クラス。

ユーザーインターフェース要素状態という意味だと思う

e:enabled
e:disabled
e:checked

否定擬似クラス

e == 要素です。

e:not(s)

input { 
     vertical-align:middle;
     }
input:not([type="text"]){
vertical-align:top;
}

間接セレクタ

e f は、要素
E ~ F

セレクタの記述方法については、CSS セレクタに関するおさらい | WWW WATCH等に詳細に書かれていました。このエントリは、カンニング帖のように、自分用にまとめているだけです。

*1:親要素の何番目の子要素に当たるか指定できる。odd even an+b　も指定可能