CSSセレクタ種類

精准狙击元素：CSS 選択器タイプ全解析

概要

网页の要素を自由にスタイリングしたいと思いませんか？ CSS 選択器の理解が鍵となります！この記事では、基本的な選択器、組み合わせ選択器、属性選択器、擬似クラス、擬似要素など、様々な CSS 選択器について分かりやすく解説し、サンプルコードを交えながら、Web ページのスタイルを簡単に操り、個性的な Web ページを作成する方法を学びます！

見出し & 内容

1. 基本選択器：Webページ要素の「名指し」

タグ選択器: HTML タグ名を使用して要素を選択します。例えば、 p、div、a など。

(コード例)
```
 <p>これは段落です。</p>
 
```
```
 p {
   color: blue;
 }
 
```
- クラス選択器: 要素の class 属性値を使用して要素を選択します。. を先頭に付けます。例えば、.highlight、.button など。

(コード例)
```
 <p class="highlight">これは強調表示された段落です。</p>
 
```
```
 .highlight {
   background-color: yellow;
 }
 
```
- ID 選択器: 要素の id 属性値を使用して、一意の要素を選択します。 # を先頭に付けます。例えば、 #header、#footer など。

(コード例)
```
 <div id="header">これはウェブページのヘッダーです。</div>
 
```
```
 #header {
   height: 100px;
   background-color: #f0f0f0;
 }
 
```
- ユニバーサルセレクタ: * を使用して、すべての要素を選択します。

(コード例)
```
 * {
   margin: 0;
   padding: 0;
 }
 
```

2. 組み合わせ選択器：ターゲット要素を正確に特定する

子孫選択器: スペースで区切られた2つの選択器を使用し、最初の選択器のすべての子孫要素を選択します。

(コード例)
```
 <ul>
   <li>リスト項目 1</li>
   <li>リスト項目 2</li>
 </ul>
 
```
```
 ul li {
   list-style: none;
 }
 
```
- 子選択器: > 記号で区切られた2つの選択器を使用し、最初の選択器のすべての直接の子要素を選択します。

(コード例)
```
 <div class="container">
   <p>段落 1</p>
   <div>
     <p>段落 2</p>
   </div>
 </div>
 
```
```
 .container > p {
   font-weight: bold;
 }
 
```
- 隣接兄弟選択器: + 記号で区切られた2つの選択器を使用し、最初の選択器の直後の兄弟要素を選択します。

(コード例)
```
 <h1>タイトル</h1>
 <p>段落</p>
 
```
```
 h1 + p {
   margin-top: 20px;
 }
 
```
- 一般兄弟選択器: ~ 記号で区切られた2つの選択器を使用し、最初の選択器の後のすべての兄弟要素を選択します。

(コード例)
```
 <h1>タイトル</h1>
 <p>段落 1</p>
 <div>
   <p>段落 2</p>
 </div>
 
```
```
 h1 ~ p {
   color: gray;
 }
 
```

3. 属性選択器：属性に基づいて要素をフィルタリングする

[attribute]: 指定された属性を含む要素を選択します。

(コード例)
```
 <a href="#">リンク 1</a>
 <span title="ヒント">テキスト</span>
 
```
```
 [href] {
   text-decoration: none;
 }
 
```
- [attribute=value]: 属性値が指定された値と等しい要素を選択します。

(コード例)
```
 <input type="text">
 <input type="password">
 
```
```
 [type="password"] {
   border: 2px solid red;
 }
 
```
- [attribute~=value]: 属性値に指定された値が含まれている要素を選択します。

(コード例)
```
 <div class="box red-box">赤いボックス</div>
 
```
```
 [class~=red] {
   background-color: pink;
 }
 
```
- (その他の属性選択器): |=, ^=, $=, *=。それぞれ、属性値が指定された値で始まる（ハイフンを含む）、属性値が指定された値で始まる、属性値が指定された値で終わる、属性値に指定された値が含まれている、という意味です。

(コード例)
```
 <input type="text" placeholder="ユーザー名を入力してください">
 
```
```
 [placeholder^="ユーザー名を入力してください"] {
   color: green;
 }
 
```

4. 擬似クラス：要素の特殊な状態を捉える

リンクの擬似クラス: :link, :visited, :hover, :active。それぞれ、未訪問のリンク、訪問済みのリンク、マウスホバー時のリンク、マウス押下時のリンクを表します。

(コード例)
```
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
```
動的擬似クラス: :focus, :enabled, :disabled, :checked。それぞれ、フォーカスを取得した要素、インタラクト可能な要素、インタラクト不可な要素、チェックされたフォーム要素を表します。

(コード例)
```
input:focus { outline: 2px solid blue; }
```
(その他のよく使われる擬似クラス): :first-child, :last-child, :nth-child(n), :empty, :not(selector) などがあります。

(コード例)
```
li:first-child { font-weight: bold; }
```

5. 擬似要素：要素の特定の部分を操作する

::before: 要素の内容の前にコンテンツを挿入します。

(コード例)
```
p::before {
  content: "開始：";
}
```
::after: 要素の内容の後にコンテンツを挿入します。

(コード例)
```
p::after {
  content: "——終了";
}
```
(その他の擬似要素): ::first-letter, ::first-line, ::selection などがあります。

まとめ

この記事では、CSS 選択器の種類について詳しく解説し、コード例を交えながら、選択器の使い方を簡単に習得できるようにしました。CSS 選択器を柔軟に使いこなすことで、Webページの要素を正確に制御し、より魅力的なWebページを作成することができます。

参考文献

よくある質問

Q1: 複数の選択器を組み合わせて使用することはできますか？

はい、できます。複数の選択器をカンマで区切って記述することで、複数の選択器を組み合わせることができます。例えば、h1, h2, h3 と記述すると、h1 要素、h2 要素、h3 要素のすべてを選択します。

Q2: ID 選択器とクラス選択器の違いは何ですか？

ID 選択器は、ページ内で一意の要素を選択するために使用します。一方、クラス選択器は、同じクラス名を持つ複数の要素を選択するために使用します。

Q3: 擬似クラスと擬似要素の違いは何ですか？

擬似クラスは、要素の特定の状態に基づいて要素を選択します。一方、擬似要素は、要素の特定の部分を仮想的に作成し、スタイルを適用します。

その他の参考記事:CSS セレクタについて