タグ

CSS セレクタに関するfumi7826のブックマーク (16)

  • usrb.in

    This domain name has been registered with Gandi.net. It is currently parked by the owner.

  • 付録:セレクタ関連の対応状況 - CSS2リファレンス

    Win版 MSIE 3 クラス/ID名にハイフンが含まれる場合,付随する宣言ブロックごと無視される。 Win版 MSIE 5~6,Netscape 4 クラス/ID名がアンダースコアから始まる場合,付随する宣言ブロックごと無視される(IE6 ではエスケープすれば有効になる)。 アンダースコアから始まる識別子はCSS2 の正誤表で訂正され,有効になった(ただし HTML のid属性値では不正)。 Netscape 4 タイプセレクタに取り付けられたIDセレクタ(要素型名#識別子)は解析されない。 Netscape 6.0(6.1以降は除く) クラス/ID名にアンダースコアが含まれる場合,付随する宣言ブロックごと無視される(エスケープすれば有効になる)。 関連バグ情報: セレクタ指定で「#」より前の部分を無視する(WinIE5.0) 要素名に続けて書いた一意セレクタを認識しない(N4.x) 空

  • CSS3 セレクタ チートシート

    以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート (PDF) ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c

    CSS3 セレクタ チートシート
  • 非対応セレクタを利用した CSS ハックの注意点 - 2xup.org

    2007-01-21T04:00:10+09:00 Microsoft Internet Explorer 7 正式版の登場で、これまで未対応だった CSS セレクタが利用できるようになりました。Windows IE7 で対応したプロパティのおさらいと、その他ブラウザでの対応状況を資料ではなく実際に試してみてまとめていた中から今回は子セレクタと隣接兄弟セレクタにしぼり、備忘録も兼ねてまとめてみます。子セレクタ、隣接兄弟セレクタの仕様は以下のとおり。 子セレクタ A>B { property: value; } 親要素 A の直下(子) にあるBにのみ装飾を行うセレクタ。 div>span { color: gray; } この場合、<div><span>not gray</span></div> はグレーの文字になりますが、<div><p><span>not gray</span></p>

  • CSS セレクタに関するおさらい | WWW WATCH

    CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTMLCSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説

    CSS セレクタに関するおさらい | WWW WATCH
  • CSS セレクタに関するおさらい 2 | WWW WATCH

    前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child

    CSS セレクタに関するおさらい 2 | WWW WATCH
  • CSS セレクタに関するおさらい 3

    前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line

    CSS セレクタに関するおさらい 3
  • CSS 3 セレクタ最終草案リリース - 我的春秋

    CSS 3 セレクタ最終草案がほぼ予定の1ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。 ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。(残念ながら IE や Opera では未対応。) サイト内へのリンク サイト外へのリンク メールアドレスへのリンク(ダミー) PDF ファイルへのリンク(ダミー) MS Word ファイルへのリンク(ダミー) MS Excel ファイルへのリンク(ダミー) テキストファイ

    CSS 3 セレクタ最終草案リリース - 我的春秋
    fumi7826
    fumi7826 2006/11/16
     属性セレクタの説明
  • Lucky bag::blog: CSS3 の Selectors と CSS3 Advanced Layout Module

    増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。 E[foo^="bar"] foo 属性値が文字列 bar で始まる E 要素にマッチ E[foo$="bar"] foo 属性値が文字列 bar で終わる E 要素にマッチ E[foo*="bar"] foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ E:root ドキュメントのルートである E 要素にマッチ E:nth-child(n) 親の中で n 番目の子である E 要素にマッチ E:nth-last-child(n) 親の中で最後から数えて n 番目の子である E 要素にマッチ E:nth-of-type(n) 同じ要素名を持つ兄弟の n 番目の E 要素にマッチ E:nth-last-of-type(n) 同じ要素名を持つ兄弟の最後か

    fumi7826
    fumi7826 2006/11/16
     セレクタの説明
  • http://msugai.fc2web.com/web/CSS/selector.html

    fumi7826
    fumi7826 2006/11/15
     属性セレクタの説明
  • http://www.tg.rim.or.jp/~hexane/ach/hscs/hscs5-02.htm

    fumi7826
    fumi7826 2006/11/15
    属性セレクタの説明
  • セレクタ - CSS2 リファレンス

    この文書では,CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ,文書ツリーの各要素に適用されるスタイル規則を決定します。 このセレクタの章を読み始める前に,まづCSS2構文の概説を通読されることを,お奨めします。 目次 パターンマッチング(Pattern matching) セレクタの構文(Selector syntax) グループ化(Grouping) 全称セレクタ(Universal selector) タイプセレクタ(Type selectors) 子孫セレクタ(Descendant selectors) 子供セレクタ(Child selectors) 隣接兄弟セレクタ(Adjacent sibling selectors) 属性セレクタ(Attribute selectors) クラスセレクタ(C

    fumi7826
    fumi7826 2006/11/15
     属性セレクタなどの解説
  • hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ

    記事データ 投稿者 望月真琴 投稿日時 2006-10-20T03:57+09:00 タグ CSS Firefox IE Opera まとめ 概要 IE 7 の正式版がリリースされたので、 CSS Selectors testsuite の IE 6 と IE 7 と Firefox 1.5.0.7 と Opera 9.02 での検証結果をまとめてみました。 リプライ 4 件のリプライがあります。 IE 7 の正式版が出たので CSS Selectors testsuite でチェックしてみた IE 7 の正式版がリリースされたので、かねてから便利だと思っていた、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite で紹介されていた CSS Selectors testsuite - CSS3 .

    fumi7826
    fumi7826 2006/11/02
     セレクターのまとめ
  • IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書

    問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規

    fumi7826
    fumi7826 2006/10/30
     :first-letterについてのまとめ
  • CSS3 Selectors Test - CSS3 . Info

    Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests. Because it i

    fumi7826
    fumi7826 2006/10/11
     CSS セレクタ対応状況をチェック
  • セレクタ - CSS Dencitie

    この章では、各種セレクタについて解説します。セレクタとは、その宣言をどの要素に適用するか、つまり、後に続く宣言ブロックで指定されているスタイルをどの要素に使うか、という事を決定する為のものです。 例を見てみましょう。以下のような規則集合があったとしましょう。 th { color: red } この場合、すべての th要素 の 'color' の値を red にします。つまり、すべての th要素 が赤色の文字で表示されます。この th の部分がセレクタ文字列に相当します。ここでは、そのセレクタ文字列の書き方を解説します。 CSS2では8種類のセレクタ、全称セレクタ・タイプセレクタ・子孫セレクタ・子セレクタ・隣接セレクタ・属性セレクタ・クラスセレクタ・一意セレクタがあります。 このうち属性セレクタは、更に4つに分かれます。広く見れば、クラスセレクタや一意セレクタも属性セレクタの一種と言えます

  • 1