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

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

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

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

no image

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

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

no image

backgroundやbox系のプロパティ

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

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

アーカイブ