CSSセレクターについてメモ
📝 1. 基本的なセレクター
要素を指定
p {
color: blue;
}🎨 2. クラスセレクター
クラスセレクターは、要素にクラス属性を付与してそれを選択します。
<p class="important">This is an important paragraph.</p>.important {
font-weight: bold;
}🔑 3. IDセレクター
IDセレクターは、要素に一意のIDを付与してそれを選択します。
<div id="header">Header</div>#header {
background-color: gray;
}🛠️ 4. 属性セレクター
属性セレクターは、要素の属性に基づいて選択します。
<input type="text" />input[type="text"] {
width: 200px;
}🌳 5. 子孫セレクター
子孫セレクターは、要素のネストされた関係を使用して選択します。 半角スペースを開ける。
<div class="container">
<p>This is a paragraph inside container.</p>
</div>.container p {
font-style: italic;
}👶 6. 直接子セレクター
直接子セレクターは、指定された要素の直接の子要素のみを選択します。
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>ul > li {
list-style-type: square;
}7. 疑似クラスセレクター
疑似クラスセレクタは、要素が特定の状態にある場合にスタイルを適用するためのCSS
よく使われるもの
:hover: マウスが要素の上にあるとき。
:active: 要素がクリックされているとき。
:focus: 要素がフォーカスを受け取っているとき。
:visited: 訪問済みのリンク要素に対して。
:first-child: 要素がその親要素の最初の子要素である場合
:last-child: 要素がその親要素の最後の子要素である場合
:nth-child(): 指定した式で子要素を選択します。例えば、:nth-child(2n) は偶数番目の子要素を選択します。
<div class="container">
<p>最初の子要素</p>
<p>2番目の子要素</p>
<p>3番目の子要素</p>
<p>最後の子要素</p>
</div>
/* 最初の子要素に赤い背景色を適用 */
.container p:first-child {
background-color: red;
}
/* 最後の子要素に青い背景色を適用 */
.container p:last-child {
background-color: blue;
}
/* 偶数番目の子要素に緑の文字色を適用 */
.container p:nth-child(even) {
color: green;
}
/* 奇数番目の子要素にオレンジの文字色と斜体を適用 */
.container p:nth-child(odd) {
color: orange;
font-style: italic;
}
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
🎭 8. 疑似要素セレクター
疑似要素セレクターは、要素の特定の部分にスタイルを適用します。
::before: 選択した要素の最初の子要素としてスタイルを追加します。
::after: 選択した要素の最後の子要素としてスタイルを追加します。
::first-letter: 選択した要素の最初の文字にスタイルを適用します。
::first-line: 選択した要素の最初の行にスタイルを適用します。
<p>This is a paragraph.</p>p::first-line {
font-weight: bold;
}🏡 9. 子孫要素の選択
孫要素
<div class="parent">
<div>
<p>親の孫要素1</p>
<p>親の孫要素2</p>
</div>
<ul>
<li>親の子要素2</li>
<li>親の子要素3</li>
</ul>
</div>.parent p {
/* スタイル */
}2つのクラスを持つ要素
<div class="container first">...</div>
.container.first {
/* スタイル */
}