コピペで使える！よく使う CSS セレクタ のまとめ

この記事の目次

1. すべての要素に適用

アスタリスク（*）ですべての要素にスタイルを適用することができる CSS セレクタ。
リセットしたいときに、よく使用されます。

すべての要素に適応したいとき

CSS

* {
  color:red;
}

p要素の中にある要素すべてに適用したいとき

CSS

p * {
  color:red;
}

2. 指定したクラス名がある要素に適用

クラス名を指定した要素にスタイルが適用されます。
クラス名は、1ページで複数回使用するCSSに付けます。

指定したクラス名のみに適応したいとき

CSS

.sample {
  font-size:18px;
  color:red;
}

html

<p class="sample">この中身に適用されます<p>

p要素であり、指定したクラス名のみに適応したいとき

CSS

p.sample {
  font-size:18px;
  color:red;
}

html

<p class="sample">この中身に適用されます</p>
<div class="sample">この中身には適用されません</div>

1つの要素に、複数のクラス名を適応したいとき

htmlに、クラス名を半角スペースで区切って指定すると、複数のCSSを適用することもできます。

CSS

p.sample1 {
  color:red;
}
p.sample2 {
  font-size:18px;
}

html

<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>

3. 指定したid名がある要素に適用

基本的には先ほどのクラスと一緒で、id名を指定した要素にスタイルが適用されます。
idは、1ページに1箇所にしか使用できません。

指定したid名のみに適応したいとき

CSS

#sample {
  font-size:16px;
}

4. 子孫要素に適用

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

pタグの中にあるstrong要素に適用したいとき

CSS

p strong {
  font-size:16px;
}

html

<p>pタグのなかにある<strong>strongタグ</strong>に適用されます。</p>

クラス名magoの中にあるstrong要素に適用したいとき

CSS

.mago strong {
  font-size:16px;
}

magoというクラス名がついたp要素の中にある、strong要素に適用したいとき

CSS

p.mago strong {
  font-size:16px;
}

5. 子要素にのみ適用

CSS セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

クラス名sampleの直下にあるa要素にのみ適用したいとき

CSS

div.sample > a {
  font-size:18px;
  font-weight:bold;
}

html

<div class="sample">
  <a href="#">リンク1<a/>
  <ul>
    <li><a href="#">リンク1<a/></li>
  </ul>
<div>

6. 隣接している要素に適用

「+」で隣接している要素にスタイルを適用することができる CSS セレクタ。

h2要素に隣接しているp要素に適応したいとき

CSS

h2 + p {
  color:red;
  font-weight:bold;
}

html

<h2>h2要素</h2>
<p>h2要素の隣にあると適用されます</p>
<p>h2要素の隣ではないので適用されません</p>

7. 後にある要素に適用

「~」である要素の後にある要素にスタイルを適用することができます。

h2要素に隣接しているp要素に適応したいとき

CSS

h2 ~ p {
  color:red;
  font-weight:bold;
}

html

<p>h2要素のの前なので適用されません</p>
<h2>h2要素</h2>
<p>h2要素の後にあると適用されます</p>
<p>h2要素の後にあると適用されます</p>

 

【擬似要素・擬似クラス】 CSS セレクタ 

8. :before　指定した要素の前に要素を追加

contentプロパティとの組み合わせで、指定した要素の前に指定した内容を生成します。
テキストだけでなく、画像を指定することも可能。

h2要素の前に、「※」を追加したいとき

CSS

h2:before{
content: "※ ";
}

h2要素の前に、画像を追加したいとき

CSS

h2:before{
content: url(http://ky5ky5.org/images/01.png);
}

9. :after　指定した要素の後ろに要素を追加

h2要素の後ろに、「※」を追加したいとき

CSS

h2:after{
content: "※ ";
}

h2要素の後ろに、画像を追加したいとき

CSS

h2:after{
content: url(http://ky5ky5.org/images/01.png);
}

リンク先がpdfの場合のみ、後ろに画像を追加したいとき

CSS

a[href$=".pdf"]:before {
content: url(http://ky5ky5.org/images/01.png);
}

リンク先が別ウィンドウの場合のみ、後ろに画像を追加したいとき

CSS

a[target="_blank"]::after {
content: url(http://ky5ky5.org/images/01.png);
}

10. :first-letter 　最初に現れる1文字にだけ適用

雑誌の記事でたまにありそうなデザインになります。文章の最初の1文字のみに適応されます。

最初の1文字のみに適応したいとき

CSS

p:first-letter {
  font-weight:bold;
  font-size:32px;
}

11. :first-line　最初の行にだけ適用

最初の1行のみに適応したいとき

CSS

p:first-line {
  font-weight:bold;
  color:red;
}

12. :first-child　最初に現れる要素にだけ適用

リストなどで、最初の要素のみデザインを変えたいときによく使用されます。

最初に現れる要素にのみ適用したいとき

CSS

li:first-child {
  font-weight:bold;
  color:red;
}

html

<ul>
<li>最初のp要素にだけ適用されます。</li>
<li>2つ目以降のp要素には適用されません。</li>
</ul>

13. :last-child　最初に現れる要素にだけ適用

最後に現れる要素にのみ適用したいとき

CSS

li:last-child {
  font-weight:bold;
  color:red;
}

14. :nth-of-type(n)　n番目に現れる要素に適用

:nth-of-type(n)でn番目に現れる要素にスタイルを適用します。
一覧表示などでよく使用されます。

2番目に現れるp要素にのみ適用したいとき

CSS

p:nth-of-type(2) {
  font-weight:bold;
  color:red;
}

html

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

nの部分は以下のように複数指定することもできます。

:nth-child(n) n番目の要素に適用
:nth-child(odd) 奇数番目の要素に適用
:nth-child(2n+1) 奇数番目の要素に適用
:nth-child(even) 偶数番目の要素に適用
:nth-child(2n) 偶数番目の要素に適用
:nth-child(3n) 3,6,9,12…番目の要素に適用
:nth-child(3n+1) 1,4,7,10…番目の要素に適用

奇数番目に表れるp要素にのみ適用したいとき

CSS

p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

html

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

15. :nth-last-of-type(n)　後ろからn番目に現れる要素に適用

:nth-last-of-type(n)で後ろから数えてn番目に現れる要素にスタイルを適用します。nの使い方は先ほどと同じです。

後ろから2番目に現れるp要素にのみ適用したいとき

CSS

p:nth-last-of-type(2) {
  font-weight:bold;
  color:red;
}

html

<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>

16. :hover　オンマウス時に適用

要素にカーソルがのったときに適応したいとき

CSS

div.onmouse:hover {
  background:#eee;
}

17. :not　該当しない場合に適用

指定したセレクタに該当しない場合にスタイルが適用されます。

id名「sample」が付けられたpタグ以外にスタイルを適用したいとき

CSS

p:not(#sample) {
  font-size:18px;
}

CSS

body *:not(strong) {
  font-size:18px;
}

strongタグ以外のすべてにスタイルが適用される。

18. :focus　フォーカスされているユーザーインターフェース要素に適用

テキストエリアなどに使用されます。

フォーカス時に入力エリアを伸ばしたいとき

CSS

input[type="text"]:focus {
  width: 300px;
}

19. :checked　チェックされているユーザーインターフェース要素に適用

inputのラジオボタンやチェックボックスに使用されます。

CSS

input[type=radio]:checked + label {
  color: red;
  font-weight:bold;
}

html

<form> 
   <input type="radio" name="btn" value="sample1"> 
   <label>ボタン1</label>
   <input type="radio" name="btn" value="sample2"> 
   <label>ボタン2</label>  
</form>

チェックされてボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。

【属性セレクタ】CSS セレクタ 

属性セレクタはすべて以下のhtmlをサンプルにしています。

html

<a href="#" title="タイトルその1">タイトルその1</a><br />
<a href="#" title="タイトルその2">タイトルその2</a><br />
<a href="#" title="3つ目のタイトル">3つ目のタイトル</a><br />
<a href="#">タイトル4</a>

20. E[foo]　特定の属性を持つ要素に適用

tittle属性を持つaタグにスタイルを適用したいとき。値は関係ありません。

CSS

a[title] {
  font-weight:bold;
  color:red;
}

21. E[foo=”bar”]　特定の属性(値)を持つ要素に適用する

tittle属性に「タイトルその1」という値を持つa要素にスタイルを適用したいとき

CSS

a[title="タイトルその1"] {
  font-weight:bold;
  color:red;
}

formまわりのinput要素などによく使用されます。

同じinput要素でも、それぞれの要素に独自のスタイルを適用させることができます。

input[type=”text”] 一行テキストボックス
input[type=”tel”] 電話番号の入力欄
input[type=”url”] URLの入力欄
input[type=”email”] メールアドレスの入力欄
input[type=”password”] パスワード入力欄
input[type=”date”] 日付の入力欄
input[type=”number”] 数値の入力欄
input[type=”checkbox”] チェックボックス
input[type=”radio”] ラジオボタン
input[type=”file”] サーバーへファイルを送信
input[type=”submit”] 送信ボタン
input[type=”image”] 画像ボタン
input[type=”reset”] リセットボタン
input[type=”button”] 汎用ボタン

 

22. E[foo^=”bar”]　属性の値が指定した文字で始まる場合に適用する

tittle属性が「タイトル」で始まる場合にスタイルを適用したいとき

CSS

a[title^="タイトル"] {
  font-weight:bold;
  color:red;
}

23. E[foo$=”bar”]　属性の値が指定した文字で終わる場合に適用する

tittle属性が「タイトル」で終わる場合にスタイルを適用したいとき

CSS

a[title$="タイトル"] {
  font-weight:bold;
  color:red;
}

24. E[foo*=”bar”]　属性の値が指定した文字を含む場合に適用する

tittle属性が「その」を含む場合にスタイルを適用したいとき

CSS

a[title*="その"] {
  font-weight:bold;
  color:red;
}

コピペで使える！よく使う CSS セレクタ

コピペで使える！よく使う CSS セレクタ のまとめです。
普段使わないけど、実用的な CSSセレクタ ってありますよね。他にも、知っていると便利な セレクタ をまとめています。
セレクタがあれば、ごちゃごちゃした長いCSSを書く必要はありません！覚えなくても、知っていると便利です！
他にも、知っていると便利な CSS セレクタ もありますので、随時更新していきます！

この記事も読まれています

  1. cssでデザインするレスポンシブ対応のシンプルなテーブル cssでデザインする レスポンシブ 対応 のシンプルなテーブル cssのみでデザインした、レスポンシブ対応のシ... もっと読む »...
  2. 矢印アイコン をCSSだけで作る！上向き・下向き・横向き 矢印アイコン をCSSだけで作る！上向き・下向き・横向き 矢印アイコン をCSSだけで作る！上向き・下向き・横... もっと読む »...
  3. 城桧吏（じょうかいり）くんってどんな子？年齢や学校と所属は？祥太役でブレイク！ この記事の目次 万引き家族の子役の城桧吏（じょうかいり）祥太役でブレイク！ 「万引き家族」ってどんな内容？城 ... もっと読む »...
  4. 【THE KISS】人気ペアネックレスがお得に！50%OFFも！ この記事の目次 1位　シルバー ペア ネックレス SPD772DM-773DM2位　シルバー ペア ネックレス... もっと読む »...
  5. MVが話題のジョン・ヨンファを徹底解剖！彼女は？結婚は？ この記事の目次 ジョン・ヨンファさんの新曲「Letter」のMVが話題ジョン・ヨンファさんのプロフィール歌だけ... もっと読む »...