スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

意外と知らない!?CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。

css-selector.png

CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。

属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。

css-selector-html3.png

私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。

また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。

SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイルで指定していないのでieだとうまく動かないものもあります。

【追記】
CSS3セレクタについて別記事でまとめましたので、ぜひご覧ください。
保存版!CSS3セレクタの説明書

1. * (すべての要素に適用)

アスタリスク(*)ですべての要素にスタイルを適用することができます。

CSS
* {
  color:red;
}

すべての要素に適用されます。

CSS
p * {
  color:red;
}

p要素の中にある要素すべてに適用されます。

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

クラス名を指定した要素にスタイルが適用されます。

CSS
.sample {
  font-size:18px;
  color:red;
}
html
<p class="sample">この中身に適用されます<p>

このような指定方法もできます。

CSS
p.sample {
  font-size:18px;
  color:red;
}
html
<p class="sample">この中身に適用されます</p>
<div class="sample">この中身には適用されません</div>

クラス名sampleがついたp要素に適用されます。クラス名がsampleでもdiv要素には適用されません。

sample

この中身に適用されます

この中身には適用されません

クラス名を半角スペースで区切ると複数適用することもできます。

CSS
p.sample1 {
  color:red;
}
p.sample2 {
  font-size:18px;
}
html
<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>
sample

2種類のスタイルが同時に適用されます

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

基本的には先ほどのクラスと一緒です。ただidの場合は1つの要素にしか適用されません。

CSS
#sample {
  font-size:16px;
}

idはjavascriptやページ間の移動の際にも使われます。

4. E F (子孫要素に適用)

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

CSS
p strong {
  font-size:16px;
}

pタグの中にあるstrong要素に適用されます。

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

このような場合ですね。

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

クラス名magoの中にあるstrong要素に適用されます。

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

magoというクラス名がついたp要素のなかにあるstrong要素に適用されます。

5. E > F (子要素にのみ適用)

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

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

クラス名sampleの直下にあるa要素にのみ適用されます。

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

6. E + F (隣接している要素に適用)

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

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

h4要素に隣接しているp要素の文字が赤になります。

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

H4要素

h4要素の隣にあると適用されます

h4要素の隣ではないので適用されません

7. E ~ F (後にある要素に適用【CSS3】)

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

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

h4要素に隣接しているp要素の文字が赤になります。

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

h4要素の前なので適用されません

H4要素

h4要素の後にあると適用されます

h4要素の後にあると適用されます

擬似要素・擬似クラス

8. :first-letter (最初に現れる文字にだけ適用)

雑誌の記事でたまにありそうな。wikipediaのトップページみたいな感じです。

CSS
p:first-letter {
  font-weight:bold;
  font-size:32px;
}
sample
最初の文字にだけ適用されます。

9. :first-line (最初の行にだけ適用)

CSS
p:first-line {
  font-weight:bold;
  color:red;
}
sample
:first-lineを指定することで、最初の行にだけ適応されます。今回の場合1行目だけ赤い太字になり、2行目からは元に戻ります。

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

最初に現れる要素にのみ適用されます。

CSS
p:first-child {
  font-weight:bold;
  color:red;
}
html
<p>最初のp要素にだけ適用されます。</p>
<p>2つ目以降のp要素には適用されません。</p>
sample

最初のp要素にだけ適用されます。

2つ目以降のp要素には適用されません。

11. :nth-of-type(n) (n番目に現れる要素に適用【CSS3】)

:nth-of-type(n)でn番目に現れる要素にスタイルを適用します。

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

2番目に現れるp要素にのみ適用されます。

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

1行目

2行目

3行目

4行目

5行目

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…番目の要素に適用
CSS
p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

このようにすると奇数番目に表れるp要素にのみ適用されます。

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

1行目

2行目

3行目

4行目

5行目

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

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

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

後ろから2番目に現れるp要素にのみ適用されます。

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

1行目

2行目

3行目

4行目

5行目

13. :hover (オンマウス時に適用)

hoverといえばリンクですが、divでも利用できます。ただしIE6はダメです。

CSS
div.onmouse:hover {
  background:#eee;
}
sample
マウスを乗せると違うスタイルが適用されます。

14. :not (該当しない場合に適用【CSS3】)

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

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

「sample」というidを付けられたpタグ以外にスタイルが適用されます。

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

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

15. :checked (チェックされているユーザーインターフェース要素に適用【CSS3】)

ようするにラジオボタンやチェックボックスです。

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> 
sample

属性セレクタ

属性セレクタはすべて以下の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>

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

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

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

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

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

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

18. E[foo^="bar"] (属性の値が指定した文字で始まる場合に適用する【CSS3】)

tittle属性が「タイトル」で始まる場合にスタイルを適用します。

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

19. E[foo$="bar"] (属性の値が指定した文字で終わる場合に適用する【CSS3】)

tittle属性が「タイトル」で終わる場合にスタイルを適用します。

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

20. E[foo*="bar"] (属性の値が指定した文字を含む場合に適用する【CSS3】)

tittle属性が「その」を含む場合にスタイルを適用します。

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

ということで役立ちそうなCSSセレクタを20個解説しました。これだけ押さえておく色々デザインの幅が広がりそうです。今後実用例を紹介できればと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
はじめまして。
毎日CSSいじっていますが、知らないことばっかりで
とっても参考になりました。
【2011/06/15 17:44】 | Becky #k2/3fVuY | [edit]
誤)tr:nth-child(even) ・・・ 奇数番目のtrに適用
正)tr:nth-child(even) ・・・ 偶数番目のtrに適用
【2011/06/15 17:52】 | abc123 #- | [edit]
誤)tr:nth-child(2n) ・・・ 奇数番目のtrに適用
正)tr:nth-child(2n) ・・・ 偶数番目のtrに適用
【2011/06/15 17:54】 | abc123 #- | [edit]
Beckyさん
はじめまして。
参考になってうれしいです。
これからもよろしくお願いします。

abc123さん
ご指摘ありがとうございます。
奇数だらけになっていましたね。
早速修正しました。

皆様にはご迷惑をおかけしました。
【2011/06/15 20:56】 | 管理人 #E2ywrYdA | [edit]
初めて目にするものばかりで、
とても参考になります。
FirefoxとIEで見比べてみたのですが、
IEでは、5,11,12,15の項目ではスタイルが
反映されていませんでした。

セレクタをコンマ「,」で区切れば、
複数の要素に同じスタイルを適用できますね。

input.send,#container a,#menu a{
cursor: default;
}
【2011/06/25 22:38】 | kana #- | [edit]
こんにちは

IEはCSS3に対応しきれていないため、
反映されていない場合もあります。

セレクタのIE対策については以下のページを見ていただければと思います。

IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」
http://weboook.blog22.fc2.com/blog-entry-267.html


セレクタをカンマで区切る方法は便利ですよね。
私もよく使います。
入れておいたらよかったですね。
【2011/06/26 10:59】 | 管理人 #E2ywrYdA | [edit]
こんにちは。
とても参考になりました。
ありがとうございます。
【2013/01/24 16:22】 | nekoemon #lxQHxGYE | [edit]
グッド!
【2013/01/24 16:28】 | ゴンチャロフ #- | [edit]
nekoemon さん
ゴンチャロフ さん

ありがとうございます。
励みになります。
またお立ち寄りください〜
【2013/01/25 17:28】 | 管理人 #E2ywrYdA | [edit]
参考になりました!

※説明が tittle属性 になっています。(title属性)
【2013/04/16 14:14】 | ennui #- | [edit]
ennui さん

ご指摘ありがとうございます。
長期間間違えた状態になっており恥ずかしい限りです。

これからもよろしくおねがいします。
【2013/04/17 06:20】 | 管理人 #E2ywrYdA | [edit]
このまとめは大変勉強になりました!
ありがとうございます。
【2013/07/14 21:58】 | long #uQUWgj4g | [edit]
long さん

はじめまして!
この記事がお役に立てたみたいでうれしいです。
今後もよろしくお願いします。
【2013/07/15 08:49】 | 管理人 #E2ywrYdA | [edit]
分かりやすくまとめていて助かりました有難う
【2013/12/13 10:12】 | 77 #- | [edit]
77さん

コメントありがとうございます。
役立ってよかったです。
またお立ち寄りください~
【2013/12/14 08:06】 | 管理人 #E2ywrYdA | [edit]
とても役に立ちました。ありがとうございます。

ただ、「タグ」という言葉をときどき「要素」の意味で使用されているのが残念。よくある間違いですが、叩かれやすいので、修正されたほうが良いと思います。
【2014/01/16 17:29】 | - #- | [edit]
わぉ、とても参考になりました。
忘れてたことも多く、こういうまとめページ探してました
感謝(。-人-。) パチン
【2014/08/18 11:38】 | SSMx #JalddpaA | [edit]
SSMx さん

コメントありがとうございます。
とても励みになります。

またおたちよりください~
【2014/08/18 18:08】 | 管理人 #E2ywrYdA | [edit]
管理人さん
すでにご存知かもしれませんが、知らなければ、よかったらこちらのサイトも参考にになります。
http://www.w3schools.com/cssref/css_selectors.asp
【2015/07/29 11:07】 | kouya #SZv2Nm5w | [edit]
今回の内容は、知っているだけでCSSの書き方の幅が広がるものだと思います。

個人的に気に入っている書き方は、
・E > e
・E e
・E[属性="値"]
この組み合わせです。たとえばGIF画像にだけ適応したいスタイルがあるとき、GIF画像のTITLE属性に「タイトル:GIF」という風にいれておく習慣をつけておきます。そしてCSS側では、
img[title*="GIF"]
とか
img[title$="GIF"]
とかでまとめて指定できます。これはかなり便利です。

input submitとinput textで別のスタイルを使うときも
input[type="submit"]
input[type="text"]
でいけるので便利ですね
【2016/08/05 11:31】 | アピールジョブズ #WcFIO/PI | [edit]
すごくわかりやすいです。助かりました。
【2017/01/15 01:06】 |   #- | [edit]
役に立ちました。
なんとなくでやっていたのですが、おかげでスッキリ理解できました。
【2017/02/13 10:27】 | - #- | [edit]
役立ちました、ありがとうございます。
【2017/09/24 03:44】 | タムラヤスユキ #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。