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

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …