CSS 親子要素

CSSの親・子要素の関係が分からなくなるので自分なりにまとめた。

  HTML

<div id="test">
<div class="parent">親要素
<div class="child">子要素
<div class="grandchild">孫要素</div>
</div>
</div>
</div>

CSS

.parent {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: lightgray;
}

parentセレクタにfont-weight: bold;を追加。 font-weightプロパティは子以下の要素にも反映される。

続いてparentセレクタにborder: solid 2px gray;を追加。 borderは非継承プロパティなので子以下に反映されない。

子要素childセレクタにborder:inherit;を追加すると親のプロパティを引き継ぐ。

.parent {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: lightgray;
  font-weight: bold;
  border: solid 2px gray;
}
.child {
  border:inherit;
}

孫要素grandchildセレクタにborder:inherit;を追加すると親のプロパティを引き継ぐ。（画像・コードは省略）

参考:スタイルの継承－CSSの基本

paddingも子要素に継承されない。borderと同じように子要素にpadding:inherit;をつけると親要素の設定を引き継ぐ。

.parent {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: lightgray;
}
.child {
  background:darkgray;
}
.grandchild{
  background:gray;
}