CSSセレクターまとめ

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;
}

🎭 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 {
    /* スタイル */
}