【CSS】セレクター


# セレクター
　
### 1. **ユニバーサルセレクター**
全ての要素に適用されるセレクター。

```css:index.css
* {
  text-align: center;
}
```
この例では、ページ内のすべての要素の文字の色が赤になる。

---

### 2. **要素セレクター**
特定のHTML要素に適用されるセレクター。

```css:index.css
img {
  width: 100px;
}
```
この例では、ページ内のすべての`img`タグに幅100pxのスタイルが適用される。

---

### 3. **セレクターリスト**
複数の要素に同じスタイルを適用する場合に使用。コンマで要素を区切りる。

```css:index.css
h1, h2 {
  color: blue;
}
```
この例では、`h1`タグと`h2`タグの文字の色が青になる。

---

### 4. **IDセレクター**
IDは一意の要素にしか適用できない。

```css:index.css
#unique {
  background-color: yellow;
}
```
この例では、IDが`unique`の要素に黄色の背景色が適用される。

```html:index.html
<div id="unique">IDセレクターの例</div>
```

---

### 5. **クラスセレクター**
クラスは複数の要素に適用できる。

```css:index.css
.highlight {
  background-color: lightgreen;
}
```
この例では、クラスが`highlight`の要素にライトグリーンの背景色が適用される。

```html:index.html
<p class="highlight">クラスセレクターの例</p>
```

---

### 6. **子孫セレクター**
親要素内にある特定の要素に適用されるセレクター。

```css:index.css
header a {
  color: red;
}
```
この例では、`header`タグ内にある全ての`a`タグに赤色の文字色が適用される。

```html:index.html
<header>
  <a href="#">リンク</a>
</header>
```

---

### 7. **隣接セレクター**
特定の要素の**直後**にある別の要素に適用される。

```css:index.css
h1 + p {
  font-style: italic;
}
```
この例では、`h1`の**直後**にある`p`要素にイタリック体が適用される。

```html:index.html
<h1>見出し</h1>
<p>この段落は隣接セレクターによってイタリック体になります。</p>
```

---

### 8. **直下セレクター**
親要素の**直下**にある子要素に適用される。

```css:index.css
div > li {
  list-style-type: square;
}
```
この例では、`div`要素の**直下**にある`li`要素に四角いリストマークが適用される。

```html:index.html
<div>
  <li>適用されるリストアイテム</li>
</div>
```

---

### 9. **属性セレクター**
特定の属性を持つ要素に適用される。
例えば、`input`タグで`type`属性が`text`の要素を選択できる。（index.htmlみたいなの）

```css:index.css
input[type="text"] {
  border: 2px solid green;
}
```
この例では、`type`が`text`の`input`要素に緑の枠線が適用される。

```html:index.html
<input type="text" placeholder="テキスト入力">
```

---

### 10. **擬似クラス**
特定の**状態**を持つ要素に適用される。
```css:index.css
a:hover {
  text-decoration: underline;
}
```
この例では、リンクにホバーした時に下線が表示されます。

---

### 11. **擬似要素**

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/2b8c6f64-a3a7-82cb-4ef8-b606f356ec7c.png">

要素の特定の**部分**に対してスタイルを適用。

```css:index.css
p::first-letter {
  font-size: 2em;
  color: red;
}
```
この例では、段落の最初の文字が大きく、赤く表示されます。

```html:index.html
<p>このパラグラフの最初の文字が大きくなります。</p>
```

# ある要素に対して複数のスタイルが競合した場合はどうなるか？

### 1. カスケード
基本的には、**下に書いた方が優先される**。

例：
```css:index.css
h1 {
  color: blue;
}

h1 {
  color: red;
}
```
この場合、下に書いた方が優先されるため、h1タグは赤色になる。

### 2. 詳細度
詳細度とは、スタイルが適用される要素の「**優先度**」を示す指標。


**IDセレクター**（例: `#header`）> **クラスセレクター**（例: `.highlight`）> **要素型セレクター**（例: `p`）

例：
```html:index.html
<p class="highlight" id="unique">テキスト</p>
```

```css:index.css
/* IDセレクター */
#unique {
  color: green;
}

/* クラスセレクター */
.highlight {
  color: yellow;
}

/* 要素型セレクター */
p {
  color: orange;
}
```
この場合、IDセレクターが一番詳細度が高いので、緑色が適用される。

**詳細度を計算してくれるサイト**

https://specificity.keegan.st/

＊詳細度が同じ場合は、下に書いた方が優先（1.カスケード）される。
＊htmlの中にcssをかくインラインはIDよりも強い。
＊`!important`を書くと詳細度とか全無視で優先される。

# 継承

### 継承とは（自然に身につくから覚えなくていい）
親要素に設定されたCSSプロパティが、子要素にも自動的に適用される仕組み。

例：
```html:index.html
<body>
    <h1>CSS</h1>
</body>
```
```css:index.css
body {
  color: red;
}
```
この場合、cssではbodyに対してのみ書いている。でも、bodyの中のh1にも継承されるて、h1の文字もredになる。

### 継承されない要素
中には継承されない要素もある。（`button`や`input`など）
継承させたい場合は、`inherit`を使う。

例：
```html:index.html
<form action="">
    <button>送信</button>
</form>
```
```css:index.css
form {
  color: green; 
}
button {
  color: inherit; /* 親のcolorプロパティを継承 */
}

```
この場合、formのcssがbuttonにも継承されて、文字がgreenになる。