CSS：属性, 子, 隣接セレクタ

★属性セレクタ：特定の要素の属性や属性値を目印にしてスタイルを適用

　・[属性="値"]

「属性="値"」が設定されている要素に対して適用
例）a[target="_blank"]

　・[属性]

「属性」が追加されている要素に対して適用
例）[checked]

　・[属性^="値"]

「属性」の値が"値"で始まっているもの
例）a[href^="https://"]

　・[属性$="値"]

「属性」の値が"値"で終わっているもの
例）a[href$=".pdf"]

　・他

例）alt属性を持つimg要素にだけスタイルを適用
img[alt] {
border-color: #f00;
}
img[alt="アップル"] {
border-color: #f00;
}

★子セレクタ：あるセレクタの直下にあるセレクタにスタイルを適用

例）span要素の直下にあるstrong要素に対してスタイルを適用
span > strong {
color: #ccc;
}

★隣接セレクタ：同じ階層にある特定の要素の、直後に隣接している要素を対象にしスタイルを適用

例）h1要素に隣接する「h2要素の背景色に」スタイルを適用
h1 + h2 {
background: #ccc;
]

★セレクタの詳細度：

・IDセレクタ：100点
・クラス、属性、擬似セレクタ：10点
・タイプセレクタ、擬似要素：1点
・全称セレクタ：0点

★セレクタを書く順番：

タイプセレクタ→クラスセレクタ→子孫セレクタ→IDセレクタ