セレクター
1. ユニバーサルセレクター
全ての要素に適用されるセレクター。
* {
text-align: center;
}
この例では、ページ内のすべての要素の文字の色が赤になる。
2. 要素セレクター
特定のHTML要素に適用されるセレクター。
img {
width: 100px;
}
この例では、ページ内のすべてのimgタグに幅100pxのスタイルが適用される。
3. セレクターリスト
複数の要素に同じスタイルを適用する場合に使用。コンマで要素を区切りる。
h1, h2 {
color: blue;
}
この例では、h1タグとh2タグの文字の色が青になる。
4. IDセレクター
IDは一意の要素にしか適用できない。
#unique {
background-color: yellow;
}
この例では、IDがuniqueの要素に黄色の背景色が適用される。
<div id="unique">IDセレクターの例</div>
5. クラスセレクター
クラスは複数の要素に適用できる。
.highlight {
background-color: lightgreen;
}
この例では、クラスがhighlightの要素にライトグリーンの背景色が適用される。
<p class="highlight">クラスセレクターの例</p>
6. 子孫セレクター
親要素内にある特定の要素に適用されるセレクター。
header a {
color: red;
}
この例では、headerタグ内にある全てのaタグに赤色の文字色が適用される。
<header>
<a href="#">リンク</a>
</header>
7. 隣接セレクター
特定の要素の直後にある別の要素に適用される。
h1 + p {
font-style: italic;
}
この例では、h1の直後にあるp要素にイタリック体が適用される。
<h1>見出し</h1>
<p>この段落は隣接セレクターによってイタリック体になります。</p>
8. 直下セレクター
親要素の直下にある子要素に適用される。
div > li {
list-style-type: square;
}
この例では、div要素の直下にあるli要素に四角いリストマークが適用される。
<div>
<li>適用されるリストアイテム</li>
</div>
9. 属性セレクター
特定の属性を持つ要素に適用される。
例えば、inputタグでtype属性がtextの要素を選択できる。（index.htmlみたいなの）
input[type="text"] {
border: 2px solid green;
}
この例では、typeがtextのinput要素に緑の枠線が適用される。
<input type="text" placeholder="テキスト入力">
10. 擬似クラス
特定の状態を持つ要素に適用される。
a:hover {
text-decoration: underline;
}
この例では、リンクにホバーした時に下線が表示されます。
11. 擬似要素
要素の特定の部分に対してスタイルを適用。
p::first-letter {
font-size: 2em;
color: red;
}
この例では、段落の最初の文字が大きく、赤く表示されます。
<p>このパラグラフの最初の文字が大きくなります。</p>
ある要素に対して複数のスタイルが競合した場合はどうなるか？
1. カスケード
基本的には、下に書いた方が優先される。
例：
h1 {
color: blue;
}
h1 {
color: red;
}
この場合、下に書いた方が優先されるため、h1タグは赤色になる。
2. 詳細度
詳細度とは、スタイルが適用される要素の「優先度」を示す指標。
IDセレクター（例: #header）> クラスセレクター（例: .highlight）> 要素型セレクター（例: p）
例：
<p class="highlight" id="unique">テキスト</p>
/* IDセレクター */
#unique {
color: green;
}
/* クラスセレクター */
.highlight {
color: yellow;
}
/* 要素型セレクター */
p {
color: orange;
}
この場合、IDセレクターが一番詳細度が高いので、緑色が適用される。
詳細度を計算してくれるサイト
＊詳細度が同じ場合は、下に書いた方が優先（1.カスケード）される。
＊htmlの中にcssをかくインラインはIDよりも強い。
＊!importantを書くと詳細度とか全無視で優先される。
継承
継承とは（自然に身につくから覚えなくていい）
親要素に設定されたCSSプロパティが、子要素にも自動的に適用される仕組み。
例：
<body>
<h1>CSS</h1>
</body>
body {
color: red;
}
この場合、cssではbodyに対してのみ書いている。でも、bodyの中のh1にも継承されるて、h1の文字もredになる。
継承されない要素
中には継承されない要素もある。（buttonやinputなど）
継承させたい場合は、inheritを使う。
例：
<form action="">
<button>送信</button>
</form>
form {
color: green;
}
button {
color: inherit; /* 親のcolorプロパティを継承 */
}
この場合、formのcssがbuttonにも継承されて、文字がgreenになる。