色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。n
漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。n
(*) は CSS3 で定義された値
項目をクリックすると、詳細が表示されます。
[使い方] -webkit-background-size: 40px 20px;
背景画像のサイズを指定します。横 縦の順で記述します。n
[使い方] -webkit-background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。n
[使い方] -webkit-background-clip: padding;
背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。n
[使い方] backgorund-image: url(sample.png), url(sample2.png)...;
CSS3 では背景画像を複数指定することができるようになりました。
カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。（それぞれ書かれた位置が画像と対応します）n
[使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];
[使い方] -webkit-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。
[使い方] display: -webkit-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。n
[使い方] -webkit-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。n
[使い方] -webkit-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）n
[使い方] -webkit-box-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。n
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。n
[使い方] -webkit-text-stroke: 2px blue;
テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。n
[使い方] -webkit-text-fill-color: white;
テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。n
[使い方] -webkit-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。n
[使い方] -webkit-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。n
[使い方] -webkit-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。n
[使い方] -webkit-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。n
[使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )
[使い方] -webkit-box-reflect: below [0px -webkit-gradient()];
生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。
指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。n
[使い方] -webkit-mask-box-image: url(mask.png);
透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。n
[使い方] -webkit-transform: rotate(45deg);
生成されたボックスを変形(transform)させます。
指定できる値は次の通り。n
| rotate(deg) | 回転（deg で指定。30deg など） |
|---|---|
| rotateX(deg) rotateY(deg) | 横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。（deg で指定。30deg など） |
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | スキュー(シアー)（degで指定。30deg など） |
| translate(xy[x,y]) | 移動（px で指定。30px など） |
| perspective(deg) | 遠近感（数値で指定） |
[使い方] -webkit-transform: preserve;
上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
指定できる値は次の通り。n
[使い方] -webkit-transform-origin: X Y Z;
transform の基準点を指定します。n
[使い方] -webkit-backface-visibility: hidden;
rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。n
[使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');
サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
※使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります。n
[使い方] width: -moz-max-content
幅（width）の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。n
[使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
[参考：mozilla developer center]
[使い方] -moz-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。（webkit 系と指定方法が異なるので注意）n
[使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)
線状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient
[使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)
円状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient
[使い方] -moz-background-inline-policy: bounding-box;
インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。n
[使い方] display: -moz-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。n
[使い方] -moz-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。n
[使い方] -moz-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）n
[使い方] -moz-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。n
[使い方] -moz-transform: rotate(45deg);
詳細については -webkit-transform を参照してください。n
[使い方] -moz-transform-origin: X Y;
transform の基準点を指定します。n
WebKit で書かれている内容を参照してください。n
[使い方] -o-background-size: 50% 50%;
背景画像のサイズを指定します。横 縦の順で記述します。n
[使い方] background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。n
[使い方] background-clip: padding-box;
背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。n
[使い方] border-radius: 10px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。n
[使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
[使い方] box-shadow: 2px 2px 3px #999;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。n
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。n
[使い方] -o-transform: rotate(45deg);
詳しくは -webkit-transform を参照してください。n
[使い方] -o-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。n
[使い方] -o-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。n
[使い方] -o-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。n
[使い方] background-color: rgba( 0,0,0,0.5 );
透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。（0 で完全な透明になります）
とりあえずよく分からないけど、コンテンツを真ん中にしたい！ とか、メニューリストを横並びにしたい！ という要望を、コピペのみで使えるように HTML と CSS をまとめてみました。n
なので、細かい説明などは今回はしていません。使い方とか質問がありましたら 問い合わせフォーム からご連絡ください。（これを追加して！ という要望でも構いません）n
サンプルソース上部にある "view plain" をクリックするとコピペしやすい形でソースが表示されます。書かれている width や height などはサンプルなので適宜お好みのサイズに変更して使用してください。n
/* ※ */の部分は色や幅、高さなので使いたいサイズなどに変更してください。n
また、掲載されている HTML や CSS の ID や class 名は導入したいサイトで使われているものに変更するか、新しく制作する場合は下記のブログの ID 名 や class 名の一覧を参考にしてみてください。nもう、class名やid名で悩まないんだからっ！！ | CSS-HappyLife
前回 の続きです。今回で最後です。
今回のエントリーも完全にメモエントリーです。
CSS3 からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
擬似要素とは、そこにあたかも要素があるようにふるまう CSS のことです。
たとえば、n
上記のように（タグ名は分かりやすいようにしていますので、こんなタグはありません）あたかもそこに要素があるように描画されます。n
擬似要素は、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、:を2回使って、::と記述することが定義されています。
CSS2 までに準拠してコーディングする場合は従来どおり、:1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定です。
ですので、:はCSS2、::はCSS3の仕様で、意味は同じ、ということです。n
この::方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。nIE8 では、どうやら CSS3 の記述である:: には対応していないようです。なので、しばらくは:と書いておくのが安全かもしれません。
E という要素の最初の 1 行目にのみスタイルを指定します。CSS1 で定義されています。
1 行目というのがフォントサイズやブラウザのウィンドウサイズ等、色々な条件で変わってきますので、注意が必要です。
ちなみにブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n
テストしてみましたが、ほとんどのプロパティが指定できないので、実際どういう状況で使うのが望ましいのか分かりかねてます・・。n
E という要素の最初の 1 文字にのみスタイルを指定します。CSS1 で定義されています。
1 文字目が特定の文字（引用符やカギ括弧など）の場合、次の文字と合わせてスタイルが指定されます。
::first-line 擬似要素同様、ブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n
雑誌の ドロップキャプスのような効果を狙いたい場合などに使えます。n
ユーザーが選択した文書に対してスタイルを指定します。
例えばマウスドラッグ等でテキストを選択状態にした際の見た目を変えることができます。
選択中だけ背景画像を出す、なんてことをやると面白い演出ができるかもしれませんね。n
言わずもがな、これについてはほとんどの方が知っているでしょう。
CSS2 では:before(:after)と書いていますが、CSS3からは::と2個になります。
::after は clearfix などでよく目にすると思います。n
class 属性の値によってスタイルを指定します。基本的な使い方ですね。
ちなみに詳細度は 1 なので、ID などで指定したものに比べて上書きされやすいです。n
id 属性の値によってスタイルを指定します。こちらも基本ですね。
class 属性での指定よりも詳細度が高く（100）ID で指定したスタイルは上書きされづらいです。n
E という要素のうち、s でないものにスタイルを指定します。n
子孫セレクタは、親要素に含まれるすべての子孫要素（F）に対してスタイルを指定します。
ユニバーサルセレクタや、属性セレクタなどと組み合わせて使用できます。n
子セレクタは、親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。
div の中の span にスタイルを適用したいが、入れ子になっている div の中の span には適用させたくない、という場合などに使用します。n
E という要素から見て直接の弟要素である F という要素にスタイルを指定します。
兄弟要素とは、ある親要素内で、同列に存在する要素のうち、前 （兄） 後 （弟） に存在する要素を指します。さらに直接の弟要素とは、E という要素と同列で、Eという要素の直後に隣接して存在する要素を指します。例えば次のような場合、h2 要素は h1 要素の直接の弟要素です。n
E という要素の後に出現する F という要素にスタイルを指定します。
つまり、E という要素の弟要素が対象になります。n
このセレクタの使い方があまり思いつきませんが、例えば li:nth-child(3n) li なんて使い方をすると、3n 以降の li要素に対してスタイルを適用、なんて使い方ができます。n
合わせて読むと役に立つかもなエントリー
前回 の続きです。
今回のエントリーも完全にメモエントリーです。
CSS3 からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
ドキュメント内のルート要素である E という要素にスタイルを指定します。(X)HTML においては、ルート要素は html 要素になるので、以下のようにすれば html 要素にスタイルが適用されます。
XML の場合は、DTD で指定されたルート要素に対して適用されます。（XMLの場合はDTDなどによってルート要素が異なる）n
E という要素のうち、その親要素の n 番目の子要素である E 要素にスタイルを指定します。
（1th, 2th なんかの th と n 番目の n を合わせたもの、と覚えると覚えやすいかも）n
とすれば、div 要素内で、3 番目の子要素として出現する p 要素にのみスタイルが指定されます。また、n
として、奇数番目に出現する要素を指定したり、同じく even を n に入れて偶数番目のみを対称にしたりもできます。
（odd は奇数、even は偶数という意味）n
他にも 2n+1 など、an+b という記述も可能で、a と b に整数を入れると、n には 0 から順番に整数が代入されて計算されていきます。
つまり、2n+1 であれば、奇数 （odd） と同じであり、2ｎ+0 であれば、偶数 （even） と同様です。ちなみに、+0 は省略しても同じですので、実際は、2n と記述します。n
注意点として、:nth-child の () 内の記述はスペースを許可していないようです。（webkit系）
この記述は、下記の擬似クラスに出てくる n にも同様に使用できます。n
E という要素のうち、その親要素の "最後" から数えて n 番目の子要素である E 要素にスタイルを指定します。n
とすれば、div 要素内で、一番最後の子要素として出現する p 要素にのみスタイルが指定されます。（div p:last-childと同義）n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で n 番目に出現する E 要素にスタイルを指定します。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、5番目に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後から数えて n 番目に出現する E 要素にスタイルを指定します。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後から 3番目に出現する p 要素にのみスタイルが指定されます。（上記の逆から数える）n
E という要素のうち、その親要素の最初の子要素である E 要素にスタイルを指定します。
連続する要素の中で、"最初の要素だけ margin を指定したくない" なんてときに使えます。n
E という要素のうち、その親要素の最後の子要素である E 要素にスタイルを指定します。
上記とは逆で、"最後の要素だけ border を表示しない"なんてときに使えます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最初に出現する E 要素にスタイルを指定します。
E:first-child との違いは、E:first-child はそのE要素がその親要素内で "最初に" 登場した場合に限り適用されるスタイルです。
しかし、E:first-of-type はその親要素内で最初に登場する E に必ず適用されます。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最初に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後に出現する E 要素にスタイルを指定します。
（E:first-of-type と同じで、last-child との違いがあります）n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で唯一の子要素である （兄弟を持たない） E 要素にスタイルを指定します。
つまり、div span:only-childとすると、親要素内に span 要素が 1 つだけしか存在しない場合にスタイルを適用します。
もし "なにかしらの" 要素が 1 つだけの場合にスタイルを適用したい場合はdiv *:only-child（もしくはdiv :only-child（div との間に半角スペース））」とすることで、特定の要素を指定せずに、なにかしらの要素があった場合にこのスタイルが適用されます。n
E という要素のうち、その親要素内で唯一の E 要素にスタイルを指定します。
上記との違いは、E 要素が唯一であれば、E 以外の要素があってもスタイルが適用されます。n
E という要素のうち、子要素 （テキストノードも含めて） をまったく持たない E 要素にのみスタイルを適用します。
（テキストノードとは、タグを有さないテキストのことです。（<p>textnode<span>span text</span></p>の、textnodeの部分。つまり<p></p>だった場合））
自動的に書きだされるブログなどで、なにも含まれない要素がある場合などに使えます。n
文書内のハイパーリンクのうち、ユーザーがまだ訪れていないリンクか:link 、または訪問済みリンクか:visitedによって、それぞれにスタイルを指定します。
注意点として、以下のサンプルのような順番で記述しないと意図した結果にならない場合があります。
（CSS は通常、下に書いたもののほうが有効になるため、:visitedの下に:linkを書いてしまうと、訪問しても変化がない、ということがあります）n
ユーザーの操作に合わせてスタイルを指定します。:active はユーザーによって対象要素がアクティブにされた時。例えばマウスでクリックしてボタンを離した時などですね。
:hover はユーザーによって対象要素が指し示されている時。マウスカーソルなどが重ねられた時など。（本来は a タグ以外にも使えますが、IE6 は対応していません）
最後に、:focus は対象要素がフォーカスされている状態でのスタイルを指定します。
例えば、入力待ちになっている input 要素など。n
ハイパーリンクのうち、URI にアンカーリンクが指定されているリンクをアクティブにした際、そのターゲットとなる要素に対してスタイルを指定します。
（アンカーリンクとはhttp://example.com/example.html#section_3などの#の後ろにページ内のIDが指定されたリンクです）n
:target擬似クラスを指定することで、ページ内リンクで飛んだとしても、どこへのリンクだったかが分かるようになります。n
E という要素のうち、前方一致で fr という lang 属性値を持つ要素を対象にします。n
のように指定すれば、n
などと記述された p 要素にのみスタイルを設定します。n
E という要素のうち、有効なもの （:enabled）、無効なもの （:disabled）に対してそれぞれスタイルを指定します。
デフォルトのボタンとかを使っているのではなく、画像なんかで代替えしているときなどに使えそうですね。
E:checkedは、"ラジオボタン、チェックボックス" がチェックされた状態のときにスタイルを指定します。
さらに次回に続きます。n
合わせて読むと役に立つかもなエントリー
今回のエントリーは完全にメモエントリーです。
CSS3からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
ユニバーサルセレクタ「*（アスタリスク）」は、すべての要素を対象とします。
（ワイルドカード、と言うと分かりやすい人もいるかもしれません。UNO のワイルドカードも同じ意味です。つまり「なんでも」ってこと）
使い方は下のような感じ。よくデフォルト CSS の初期化などで目にしますね。n
さらに、子孫セレクタとして使うこともできます。
下のサンプルだと、#fooという ID のついた div 要素の直接の子要素である span を除く span 要素（例えばdiv#foo p spanなど）にスタイルが適用されます。n
タイプセレクタは最も単純なセレクタです。要素名を指定することで、その要素に対してスタイルを適用します。n
ある要素の中で、指定した属性をもつ要素に対してスタイルを定義します。
下記のサンプルでは、class 属性を持った p 要素<p class="***">にスタイルを適用します。n
同じく属性セレクタです。
こちらは属性名と、その属性値まで含めてマッチしたものにスタイルを適用します。n
こちらも属性セレクタですが、を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、複数の属性値が指定されている場合は指定の属性値を含んでいればスタイルが適用されます。
（例えば、スペース区切りで複数の class が設定されている場合などに、指定した class 名が含まれている場合などです）n
こちらも属性セレクタですが、^を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で始まる属性値を含んでいればスタイルを適用します。
（正規表現の^と同じような使い方です）n
こちらも属性セレクタですが、$を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で終わる属性値を含んでいればスタイルを適用します。
（正規表現の$と同じような使い方です）
.pdfなど、特定の拡張子で href 属性が指定されている場合、アイコンを表示する、などの使い方ができます。n
こちらも属性セレクタですが、*を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字を含む属性値を含んでいればスタイルを適用します。
（と比べて、"文字列" であることに注意してください。サンプルではexを含む文字列（例えばextternalなど）にマッチします。n
長くなってしまうので、続きは次回で。n
合わせて読むと役に立つかもなエントリー
ということで、かなり独断と偏見によってこのエントリーを書いてますがｗ
Yahoo! 知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い（勘違い）についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを 7 個ほど書き出してみました。
書いていくうちに、すごい長くなってしまいました(;´д｀)
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
