CSS3のセレクタとかプロパティとかメモっておく[Permanent Link]
- 2009年1月30日 5時46分
- CSS
- No Comments
ie7-jsのページを見ていたところ、そのデモページで、CSSのattr~="value"とか:nth-child()とか疎覚えなことに気付いたので＿〆(。。)メモメモ…
最近HTMLとかCSSの勉強してなかったからなあ。
セレクタ
[attr]- 属性セレクタ（CSS2.1）
[attr="value"]- 属性セレクタ（CSS2.1）
[attr~="value"]- 属性セレクタ（
attrを含む属性にマッチ）（CSS2.1） [attr|="value"]- 属性セレクタ（属性
attrにマッチかつ属性値valueを前方一致で含む）（CSS2.1） [attr^="value"]- 属性セレクタ（
attrを含む前方一致の属性にマッチ） [attr$="value"]- 属性セレクタ（
attrを含む後方一致の属性にマッチ） [attr*="value"]- 属性セレクタ（属性
attrにマッチかつ属性値valueを含む） :root- ルート要素にマッチ
::selection::-moz-selection- 選択要素にマッチ
:target- リンク先要素にマッチ
::before()::after()- リンク先要素にマッチ
:not()- 除外
~- 兄弟セレクタ
:first-child（CSS2.1）:last-child:nth-child():nth-last-child()
nly-child:nth-of-type():nth-last-of-type():first-of-type:last-of-type- nly-of-type
:empty- 子要素に適用。
:nth-child()なんかは、交互に背景色を変えるときとか、プログラム絡めなくて良くなるので便利だな。 :enabled:disabled- 有効か無効か
:checked- チェックされているか
::outside- …
::alternate- …
::marker- …
::line-marker- …
:default- …
:valid:invalid- …
:in-range- ut-of-range
- …
:required- ptional
- …
:read-only- …
:read-write- …
::value- …
::choices- …
::repeat-item- …
::repeat-index- …
XSLみたいになってきて、より実用度が増した感じ。
プロパティ
column-width- カラムの幅
column-count- カラム数
column-gap- カラムの境界
text-shadow- テキストの影
text-shadow- テキストの影
text-stroke-webkit-text-stroke- テキストのアウトライン
box-shadow- ボックスの影
border-radius-moz-border-radius-webkit-border-radius- ボックスのボーダーの角丸
opaciy- ボックスの透明度
opaciy- ボックス背景の透明度
transform-webkit-transform- ボックスの回転とか
web-fonts- Webサーバのフォントを使用
transionts- 時間制御
Internet Explorer 8のベンダ拡張は-ms-（翻訳）。
ひとまずはこの辺りをメモしてみたけれど、まとまらないのでリンクをば。
リソース
- CSS3 module: Cascading and inheritance
- CSS3 module: Syntax
- Selectors
- CSS3 module: Syntax
- CSS basic box model
- CSS Backgrounds and Borders Module Level 3
- CSS3 Generated and Replaced Content Module
- CSS3 module: Lists
- CSS3 Module: Paged Media
- CSS Color Module Level 3
- CSS3 module: Web Fonts
- CSS3 module: Fonts
- CSS Text Level 3
- CSS3 Basic User Interface Module
- Media Queries
- CSS3 Ruby Module
- CSS3 module: Multi-column layout
読まねば(^_^;)
※このブログ記事は将来アップデートされます。
