CSSが適用されるルール 順序 詳細度 継承

なわて投稿サムネイル

CSSが適用される順序

CSS = Cascading Style Sheets

カスケード=CSSの上書きルール

プロパティの値が、
後から出でてきたプロパティの値
又は
より詳細度の高いプロパティの値に
上書きされるルール。

強いCSSが弱いCSSを上書きするシステム。

強さの決める要素

①順序(スタイルシート上で後位のプロパティに上書き)

②詳細度(セレクタの書き方)

CSSが適用される詳細度

順位 セレクタ 強度/点数
1 !important 一番強く 上書きできない。
2 HTMLに記載されたstyle属性 1000点
3 idセレクタ 100点
4 クラスセレクタ
属性セレクタ
擬似セレクタ
10点
5 タイプセレクタ
疑似要素
1点
6 全称セレクタ ( * ) 0点

<注意>
!important
style属性
idセレクタ
は詳細度が強いのであまり使わない方が無難。

CSSプロパティの継承

継承とは

要素に設定されたプロパティの値が、その子要素や孫要素に適用されること。

※基本的に承継ありのプロパティは少ない。

継承ありのプロパティの特徴。

フォントやテキスト関係のプロパティ

(注意)ショートハンドを使った場合は全てのサブプロパティが継承の対象となる。

継承ありのプロパティ

フォント系のプロパティ

  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • color

テキスト系のプロパティ

  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform

リスト系のプロパティ

  • list-style-image
  • list-style-position
  • list-style-type
  • list-style

その他

  • border-collapse
  • border-spacing
  • caption-side
  • cursor
  • direction
  • empty-cells
  • letter-spacing
  • line-height
  • orphans
  • quotes
  • tab-size
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing
  • word-wrap