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

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素2 レイアウトに関して2.1 …

アーカイブ