100日後にWebエンジニアになるおじさん～11日目～

学んだこと

・直下セレクター
・隣接セレクター
・属性セレクター
・疑似クラス
・疑似要素
・CSSカスケード
・詳細度について
・継承について
・ボックスモデルについて

直下セレクター

特定の要素の直下の要素だけを選択する。
親要素 > 子要素 { プロパティ: 値; }

<!-- HTML  -->
<div class="parent">
  <p>これは適用される</p>
  <div>
    <p>これは適用されない</p>
  </div>
</div>

/* CSS */
.parent > p {
  color: red;
}

隣接セレクター

特定の要素の直後にある兄弟要素だけを選択する。
要素1 + 要素2 { プロパティ: 値; }

<!-- HTML -->
<div>これは適用されない</div>
<p>これは適用される</p>
<p>これは適用されない</p>

/* CSS */

div + p {
  color: blue;
}

属性セレクター

HTML内の特定の属性や値に基づいてスタイルを適応するセレクター。
記述方法によって適用のされ方が変わる。

完全一致[属性="値"]属性の値が完全に一致する要素
単語の一部に一致[属性~="値"]指定した単語を含む（スペース区切り）
接頭辞が一致（ハイフン）`[属性="値"]`
前方一致[属性^="値"]指定した値で始まる
後方一致[属性$="値"]指定した値で終わる
部分一致[属性*="値"]指定した値を含む

疑似クラス

特定の状態で適応するようにするためのもの。例えばポインタが重なったとき、チェックボックスに☑が入ったときなど、特定の状態を指定できる。

/* CSS */
a:hover {
  color: red;
}
input:focus {
  border: 2px solid blue;
}

疑似クラスの種類は非常に多いので、わからなくなったら検索しながら進めるとよい。

疑似要素

要素の一部に対してスタイルを適応するためのセレクター。
例）
::before
指定した要素の前にコンテンツを挿入する。

p::before {
  content: "★";
  color: red;
}

pタグの前に赤色の★を挿入する。

CSSカスケード

CSSが適応される順番のこと。例えば同じ要素を定義した場合は後から定義した情報が優先される。linkの読み込みも後から定義した方が優先される。

詳細度について

複数のプロパティが競合している状態の時、どれが優先して適応されるかというのは詳細度によって決定される。インラインスタイル > IDセレクタ > クラスセレクタ/属性セレクタ/擬似クラス > 要素セレクタ/擬似要素。
例外としてインポータントスタイル（! important)があり、これは詳細度に関係なく優先させることができる。しかしCSSのルールを壊してしまうため、基本的には非推奨。
CSSを書くにあたって、なぜかスタイルが適応されない！といった状況は頻繁にあるようなので詳細度の理解は必須。詳細度を計算できるツールもあるので迷った場合はそこで計算。

継承について

CSSには親のプロパティを受け継ぐものがある。受け継ぐプロパティは近しい親が優先される。
プロパティの中には継承が行われないものがある。そういったものに継承させるにはinheritを使用する。

ボックスモデルについて

CSSはボックスの要素を持つ。ボックスはマージン（ボーダーの外側の空間）、ボーダー、パディング（ボーダーとコンテンツの間の空間）、コンテンツから成る。

<!-- HTML -->
<div class="card">
  <img alt="" src="https://assets.codepen.io/123865/dog.png">
  <h1>I Am Dog</h1>
</div>
/* CSS */
div{
    width: 210px;
    border: 1px;
    border-color: grey;
    border-style: solid;
    border-radius: 5px;
    text-align: center;
}



img{
    width: 200px;
    border: 5px rgb(236,183,191) solid;
    border-radius: 50%;
    
}

追記：
codepenを外部リンクとして埋め込めば学習成果を見やすく設定できた！