【CSS3学習】セレクタについて

前回のブログ:cssとは・基本の記述方法

セレクタ#

**全称セレクタ(ユニバーサルセレクタ)　**##

書式 : ＊
範囲 : 全ての要素
(アスタリスクを記述し、すべての要素に対してスタイルを適用する。)

Qiita

cssとはCascading Style Sheetの略。

HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語

• HTML
• CSS
• JavaScript
• jQuery
• Ruby
• PHP

>```

• {
  color: blue;
  }

><img width="610" alt="全称.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/a31fe3e4-3068-1785-dd15-bd62e6d3f371.png">


## **要素型セレクタ**##
>書式 : **　要素名**
>範囲 : 要素名で指定した要素
>(文書内の指定した要素のすべてに対してスタイルを適用する。)

>```html
<h1>Qiita</h1>
<p>cssとは<strong>Cascading Style Sheet</strong>の略。</p>
<p>HTMLに対して<strong>色、大きさ、配置など</strong>を指定してページをデザインするための言語</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>
>```

>```css
p {
    color: red;
}

classセレクタ##

書式 : **　.クラス名**
範囲 : クラス名をつけた範囲
(class属性によって特定のclass名がつけられた要素を対象にスタイルを適用する。
id属性とは異なり、１つの文書内で同じclass名を複数指定することができるので、複数の箇所や異なる要素に対し同じスタイルを指定できる。)

Qiita

cssとはCascading Style Sheetの略。

HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語

• HTML
• CSS
• JavaScript
• jQuery
• Ruby
• PHP

>```

.title{
color: lightpink;
}

>```css
p.title{
    color: lightpink;
}

idセレクタ##

書式 : **　#id名**
範囲 : id名をつけた範囲
(id属性によって特定のid名が付けられた要素に対象にスタイルを適用する。
1つの文書内では同じid名を重複して指定することはできない。)

Qiita

cssとはCascading Style Sheetの略。

HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語

• HTML
• CSS
• JavaScript
• jQuery
• Ruby
• PHP

>```

css{

color: orange;

}

>```css
p#css{
    color: orange;
}

擬似クラス##

###:link###

書式 : 要素名:link
範囲 : 未訪問のリンク
(未訪問のリンクに対してスタイルを適用する。)

a:link {
color:#1b95e0;
}

>><img width="222" alt="擬似visited,link.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/a25bfa43-b56e-7bcd-5754-2688adc43bed.png">

>###**:visited**###
>>書式 : **要素名:visited**
>>範囲 : 訪問済みのリンク
>>(訪問済みのリンクに対してスタイルを適用する。)

>>```css
a:visited {
    color: #e67277;
}

###:hover###

書式 : 要素名:hover
範囲 : カーソルが乗っている状態
(要素にカーソルなどが乗った際のスタイルを適用する。カーソルは乗っているが、クリックはされていない状態)

li:hover {
color: #4cbcff;
}

>><img width="233" alt="hover.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/cc6b45e8-062c-16c6-04ce-736e02fabe62.png">


>###**:active**###
>>書式 : **要素名:active**
>>範囲 : クリック中
>>(要素がアクティブになった際のスタイルを適用する。クリックされてから離されるまでの状態)

>>```css
input:active {
    background: #ff6e9b;
    box-shadow: 2px 2px 1px #c13c8c inset;
}
>>```

>><img width="199" alt="active.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/1e1b0911-491e-5a4b-020b-fdc612a8bcac.png">


>###**:focus**###
>>書式 : **要素名:focus**
>>範囲 : フォーカスされている要素
>>(要素がフォーカスされた場合のスタイルを適用する。例えば、フォームの入力欄にカーソルを合わせ、テキスト入力できるようになった状態など)

>>```css
a:focus {
    background: #31d8e6;
    color: #fff;
}
>>```
>><img width="308" alt="focus.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/40d94b18-8a15-43e4-09cd-02bf4cb9ac48.png">



## **属性セレクタ**##

>###**要素名[属性名]**###
>>書式 : **要素名[属性名]**
>>範囲 : 特定の属性を持つ指定要素
>>(特定の属性を持つ、指定した要素を対象にスタイルを適用する。属性値は問わない)

>>```html
<ul>
  <li><a href="#" title="最新情報">最新情報！</a></li>
  <li><a href="#">お知らせ</a></li>
</ul>

a[title] {
background: #ffa969;
color: #fff;
}

###要素名[属性名="属性値"]###

書式 : 要素名[属性名="属性値"]
範囲 : 特定の属性値を持つ指定要素
(特定の属性に特定の値を持つ、指定した要素を対象にスタイルを適用する)

```

input[type="submit"] {
background-color: #b2e165;
border: none;
}

複数のセレクタ##

###セレクタ , セレクタ###

書式 : セレクタ , セレクタ
範囲 : 複数のセレクタ
(セレクタをカンマ(,)で区切ると、複数のセレクタにまとめて同じスタイルを適用できる。)

Qiita

text

リンク >>```

h1 , a {
color: #ff6e9b;
}

子孫セレクタ##

###セレクタ セレクタ###

書式 : セレクタ セレクタ
範囲 : 下の階層の子孫要素
(セレクタを半角スペースで区切ると、ある要素の下の階層にある子孫要素を対象にスタイルを適用できる。)

cssとはCascading Style Sheetの略。

>>```

p strong {
color: #1a78bd;
}

子セレクタ##

###セレクタ>セレクタ###

書式 : セレクタ>セレクタ
範囲 : 直下の階層の子要素
(セレクタを　>　で区切ると、あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用できる。)

cssとはCascading Style Sheetの略。HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語

```

p>strong {
color: #1a78bd;
}

<img width="897" alt="子セレクタ.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/56342711-8679-1771-f6f3-fea4cc4184d8.png">

隣接セレクタ##

###セレクタ+セレクタ###

書式 : セレクタ+セレクタ
範囲 : 直後に隣接している要素
(セレクタを + で区切ると、同じ階層にある要素同士で、ある要素の直後に隣接している要素を対象にスタイルを適用できる。)

Qiita

cssとはCascading Style Sheetの略。

HTMLに対して色、大きさ、配置などを指定してページをデザインするための言語

>>```

h1 + p {
color: #e14561;
}

今回は書いていない、　:nth-childなどの擬似クラスと、:afterなどの擬似要素はまた別の機会に書いていこうと思います。