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