接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
CSSのセレクタを活用しよう | Design Spice
:focus擬似クラス 要素がフォーカスされた際のスタイルを指定します。 フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。 input:focus{ background-color:#FF9; } :lang擬似クラス 特定の言語を指定されている要素にスタイルを適用します。 言語コードには、ja（日本語）、en（英語）、fr（フランス語）、zh（中国語）などがあります。 p:lang(en){ color:#C00; } :first-child擬似クラス ある要素内で最初に現れる子要素にスタイルを適用します。 li:first-child{ color:#C00; } :first-line擬似要素 ブロックレベル要素の最初の行にスタイルを適用します。 ※インライン要素には適用できません。 #firstLine p:first-line{ color:#
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
