skillup

技術ブログ

デザイン

CSSの適用ルールと継承について

投稿日:

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。

セレクタの種類

CSSのセレクタには下記のようなものがあります。

  • ユニバーサルセレクタ * 全対象のセレクタ
  • クラスセレクタ  .warningのようにクラスにつけるセレクタ
  • IDセレクタ #headerのようにIDにつけるセレクタ
  • HTML要素セレクタ h1などのようにhtmlの要素につけるセレクタ
  • 属性セレクタ input[name=”hoge”]のようにプロパティを指定するセレクタ
  • 子孫セレクタ h1 p などh1の下のpに影響
  • 子要素のみのセレクタ h1 > p h1直下のpのみに影響 孫はダメ
  • 疑似クラスセレクタ,疑似要素セレクタ a:hover、p:first-childなど

実際にはこれらのさまざまな組み合わせがあります。隣接セレクタというのもありますが、あんまり見ないので省略します。

例 HTMLセレクタ&クラスセレクタ div.warning{}など

http://weboook.blog22.fc2.com/blog-entry-268.html

セレクタの詳細度

前回もちょっと触れましたが、要はどのCSSが適用されるかのルール適用のガイドラインみたいなもの

  • IDで指定されるごとに合計値 0,1,0,0を加算
  • クラスと属性選択、疑似クラスごとに0,0,1,0を加算
  • HTML要素、疑似要素ごとに0,0,0,1を加算
  • ユニバーサルセレクタは加算されない
  • インラインは1,0,0,0

html > body table.data_table みたいのものは0,0,1,3になります。

上記ルールで最も点数の大きいものが適用されます。(左にあるものは桁に相当するので 0,0,1,0 > 0,0,0,20 になります。)

詳細度が同じものは後ろに書いたものが優先されます。

例外として!importantはすべてのCSSを上書きします。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4

継承

CSSでは親があるプロパティを持っていた場合、内包される子に対してはそのプロパティが継承されます。

上記の場合em要素も色は赤になります。

また下記のような特徴もあります。

  • ボックス系のプロパティ(マージン、パディング、背景、ボーダー)は継承されない
  • 継承に詳細度はないので、例え0,0,0,0の詳細度であっても詳細度があるものが優先される

上記の場合、emはredになります。

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5ba62 …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …