skillup

技術ブログ

デザイン

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

投稿日:2016年7月15日 更新日:

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

セレクタの種類

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{}など

意外と知らない!?CSSセレクタ20個のおさらい

セレクタの詳細度

前回もちょっと触れましたが、要はどの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を上書きします。

MDN Web Docs 詳細度の計算方法
エンジニアはもう一度CSSとちゃんと向き合ってみよう – 詳細度編

継承

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

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

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

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

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

-デザイン
-,

執筆者:


comment

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

関連記事

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

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

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

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …