CSS 何だったけってなりがちなメモ。initial と inherit

CSSのプロパティリセットする時に使うやつ。
initialとinherit
CSS書かない日が続くとどっちが何だっけ？ってなることがあるのでメモ。(メモすれば忘れにくくなる！かも

`initial` は初期化

英語で initial は「初めの、最初の、初期の」とか。
プログラムとかでよく出てくるinitとかと同じ

CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。
初期値をブラウザーのスタイルシートで指定された値と混同しないでください。
出典: initial - CSS: カスケーディングスタイルシート | MDN

HTML

<p class="text-red">
  おいでよ<em>アイカツ</em>の沼！
</p>

<p class="text-red">
  おいでよ<em class="text-initial">アイカツ</em>の沼！
</p>

CSS

.text-red   { color: red; }
.text-initial { color: initial; }

👇

See the Pen note. CSS initial by KIKIKI (@chaika-design) on CodePen.

note.

初期値
CSS プロパティの 初期値 (initial value)は、定義表に挙げられている既定値です。初期値の使い方はプロパティが継承されているかどうかで異なります。
継承プロパティでは、初期値はルート要素に対してのみ、特定の値が指定されていない場合に限り使用されます
非継承プロパティでは、初期値はすべての要素において、特定の値が指定されていない場合に限り使用されます。
出典: 初期値 - CSS: カスケーディングスタイルシート | MDN

`inherit` は親要素のプロパティを継承

英語で inherit は「受け継ぐ、相続する、遺伝する」とか。

CSS の inherit キーワードは、要素のプロパティの計算値を親要素から取得するよう指定します。
出典: inherit - CSS: カスケーディングスタイルシート | MDN

margin, padding, border, background などは、普段は子要素に継承されませんが、inherit を指定することで、子要素(classB)でも margin, padding, border, background が適用されます。通常では継承されないスタイルを親要素から継承させたり、継承することを明示的に示したい場合に使用されます。 CSS - inherit

colorとかfont-sizeとか継承されるプロパティ以外も親要素に合わせるという事っぽい

HTML

<span>Soleil</span>
<ul class="list">
  <li class="text-red">
    <span>星宮いちご</span>
  </li>
  <li class="text-blue">
    <span>霧矢あおい</span>
  </li>
  <li class="text-purple">
    <span>紫吹蘭</span>
  </li>
  <li class="text-green">
    <i>ジョニー別府</i>
  </li>
</ul>

<span>Soleil</span>
<ul class="list">
  <li class="text-red">
    <span class="text-inherit">星宮いちご</span>
  </li>
  <li class="text-blue">
     <span class="text-inherit">霧矢あおい</span>
  </li>
  <li class="text-purple">
    <span class="text-inherit">紫吹蘭</span>
  </li>
  <li class="text-green">
    <i class="text-inherit">ジョニー別府</i>
  </li>
</ul>

CSS

span { color: orange; }
.text-red    { color: red; }
.text-blue   { color: blue; }
.text-purple { color: purple; }
.text-green  { color: green; }
.text-inherit { color:  inherit; }

.list .text-red    { border-bottom: 1px solid red; }
.list .text-blue   { border-bottom: 1px solid blue; }
.list .text-purple { border-bottom: 1px solid purple; }
.list .text-inherit { border: inherit; }

👇

See the Pen note. CSS inherit by KIKIKI (@chaika-design) on CodePen.

colorだけでなく、borderも親要素のものが継承されています

`unset`

CSS の unset キーワードはプロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。
出典: unset - CSS: カスケーディングスタイルシート | MDN

親要素から継承される属性に対しては inherit と同じ動作を、継承されない属性に対しては initial と同じ動作をします。
出典: CSS - unset

unsetは少しややこしいですが、

colorやfont-sizeのような継承できる属性の値は親要素から継承 inherit
marginやborderのような継承されない属性の値は初期値に inital

という動作です。。。

HTML

<p>冴草きい</p>
<div class="yellow">
  <p>冴草きい</p>
  <p class="initial">OKOKOK~</p>
  <p class="inherit">ガンガンガンバ</p>
  <p class="unset">うしうしうっしー</p>
</div>

CSS

.yellow{
  color: #f1c847
  border: 1px solid #f1c847
}
.initial {color: initial; border: initial;}
.inherit {color: inherit; border: inherit;}
.unset {color: unset; border: unset;}