ホームへ

CSSセレクタ一覧【擬似要素,擬似クラス,属性セレクタ】

2020年03月07日

主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。

↓優先順位についてはこちら

CSSセレクタの優先順位と点数計算
疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。
この記事を読む

セレクタ

*

すべての要素		 
<style>
    *{color: red;}
</style>

<p>p要素</p>
<div>div要素</div> 
<ul>
    <li>li要素</li>
</ul>

p要素

div要素
  • li要素

.X

class="X"がある要素		 
<style>
    .X{color: red;}
</style>      

<ul>
    <li class="X">class="X"</li>
    <li id="X">id="X"</li>
    <li>指定なし</li>
</ul>
  • class="X"
  • id="X"
  • 指定なし

#X

id="X"がある要素		 
<style>
    #X{color: red;}
</style>

<ul>
    <li class="X">class="X"</li>
    <li id="X">id="X"</li>
    <li>指定なし</li>
</ul>
  • class="X"
  • id="X"
  • 指定なし

F

すべてのF		 
<style>
    li{color: red;}
</style>

<ul>
    <li>Fテキスト</li>
    <li>Fテキスト</li>
    <li>Fテキスト
        <ul><li>Fテキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
<div>テキスト</div>
  • Fテキスト
  • Fテキスト
  • Fテキスト
    • Fテキスト
  • Fテキスト
テキスト

E F

Eの子孫にあるすべてのF		 
<style>
    .E li{color: red;}
</style>
                    
<ul class="E">
    <li>Fテキスト</li>
    <li>Fテキスト</li>
    <li>Fテキスト
        <ul><li>Fテキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
<ul>
    <li>テキスト</li>
    <li>テキスト
        <ul><li>テキスト</li></ul>
    </li>
</ul>
  • Fテキスト
  • Fテキスト
  • Fテキスト
    • Fテキスト
  • Fテキスト
  • テキスト
  • テキスト
    • テキスト

E>F

E直下の子要素F		 
<style>
    .E>li{color: red;}
</style>

<ul class="E">
    <li>Fテキスト</li>
    <li>Fテキスト</li>
    <li>Fテキスト
        <ul><li>テキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
  • Fテキスト
  • Fテキスト
  • Fテキスト
    • テキスト
  • Fテキスト

E+F

Eに隣接している唯一の弟要素F		 
<style>
    .E+li{color: red;}
</style>

<ul>
    <li>テキスト</li>
    <li class="E">Eテキスト</li>
    <li>Fテキスト
        <ul><li>テキスト</li></ul>
    </li>
    <li>テキスト</li>
</ul>
  • テキスト
  • Eテキスト
  • Fテキスト
    • テキスト
  • テキスト

E~F

Eより後にある弟要素F		 
<style>
    .E~li{color: red;}
</style>

<ul>
    <li>テキスト</li>
    <li class="E">Eテキスト</li>
    <li>Fテキスト
        <ul><li>テキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
  • テキスト
  • Eテキスト
  • Fテキスト
    • テキスト
  • Fテキスト

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

擬似要素

F::before

Fの子要素の前に追加する要素		 
<style>
    p::before{content:"before";color: red;}
</style>

<p>テキスト</p>

テキスト

F::after

Fの子要素の後に追加する要素		 
<style>
    p::after{content:"after";color: red;}
</style>

<p>テキスト</p>

テキスト

F::first-letter

Fの一文字目		 
<style>
    p::first-letter{color: red;}
</style>

<p>テキスト<br>テキスト</p>

テキスト
テキスト

F::first-line

Fの一行目		 
<style>
    p::first-line{color: red;}
</style>

<p>テキスト<br>テキスト</p>

テキスト
テキスト

F::selection

Fを選択（反転）したとき		 
<style>
    p::selection{color: red;background: #a8e5e3;}
</style>

<p>反転してみて</p>

反転してみて

F::placeholder

Fのplaceholder
ie,edgeそれぞれ指定する必要あり		 
<style>
    input::placeholder{color: red;}
    /*edge*/
    input::-ms-input-placeholder{color: red;}
    /*ie*/
    input:-ms-input-placeholder{color: red;}
</style>

<input type="text" placeholder="文字を入力すると色が変わる">

擬似クラス

F:first-child

最初の要素がFなら		 
<style>
    p:first-child{color: red;}
</style>

<div>
    <h5>最初はh5</h5>
    <p>2番目はp（効かない）</p>
    <p>3番目はp</p>
</div>
<div>&nbsp;</div>
<div>
    <p>最初はp</p>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>
最初はh5

2番目はp（効かない）

3番目はp

 

最初はp

2番目はp

3番目はp

F:first-of-type

最初に現れるF		 
<style>
    p:first-of-type{color: red;}
</style>

<div>
    <h5>最初のh5</h5>
    <p>最初のp</p>
    <p>2番目のp</p>
</div>
<div>&nbsp;</div>
<div>
    <p>最初のp</p>
    <p>2番目のp</p>
    <p>3番目のp</p>
</div>
最初のh5

最初のp

2番目のp

 

最初のp

2番目のp

3番目のp

F:nth-child(n)

n番目の要素がFなら

↓nの使い方
偶数・奇数ごとにCSSを指定する方法		 
<style>
    p:nth-child(2){color: red;}
</style>

<div>
    <p>1番目はp</p>
    <h5>2番目はh5（効かない）</h5>
    <p>3番目はp</p>
</div>
<div>&nbsp;</div>
<div>
    <h5>1番目はh5</h5>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>

1番目はp

2番目はh5（効かない）

3番目はp

 
1番目はh5

2番目はp

3番目はp

F:nth-of-type(n)

n番目に現れるF		 
<style>
    p:nth-of-type(2){color: red;}
</style>

<div>
    <p>1番目のp</p>
    <h5>1番目のh5</h5>
    <p>2番目のp</p>
</div>
<div>&nbsp;</div>
<div>
    <h5>1番目のh5</h5>
    <p>1番目のp</p>
    <p>2番目のp</p>
</div>

1番目のp

1番目のh5

2番目のp

 
1番目のh5

1番目のp

2番目のp

F:last-child

最後の要素がFなら		 
<style>
    p:last-child{color: red;}
</style>

<div>
    <p>1番目はp</p>
    <p>2番目はp</p>
    <h5>最後はh5（効かない）</h5>
</div>
<div>&nbsp;</div>
<div>
    <p>1番目はp</p>
    <p>2番目はp</p>
    <p>最後はp</p>
</div>

1番目はp

2番目はp

最後はh5（効かない）
 

1番目はp

2番目はp

最後はp

F:last-of-type

最後に現れるF		 
<style>
    p:last-of-type{color: red;}
</style>

<div>
    <p>1番目のp</p>
    <p>最後のp</p>
    <h5>最後のh5</h5>
</div>
<div>&nbsp;</div>
<div>
    <p>1番目のp</p>
    <p>2番目のp</p>
    <p>最後のp</p>
</div>

1番目のp

最後のp

最後のh5
 

1番目のp

2番目のp

最後のp

F:nth-last-child(n)

後ろからn番目の要素がFなら		 
<style>
    p:nth-last-child(2){color: red;}
</style>

<div>
    <p>後ろから3番目はp</p>
    <h5>後ろから2番目はh5（効かない）</h5>
    <p>後ろから1番目はp</p>
</div>
    <div>&nbsp;</div>
<div>
    <p>後ろから3番目はp</p>
    <p>後ろから2番目はp</p>
    <h5>後ろから1番目はh5</h5>
</div>

後ろから3番目はp

後ろから2番目はh5（効かない）

後ろから1番目はp

 

後ろから3番目はp

後ろから2番目はp

後ろから1番目はh5

F:nth-last-of-type(n)

後ろからn番目に現れるF		 
<style>
    p:nth-last-of-type(2){color: red;}
</style>

<div>
    <p>後ろから2番目のp</p>
    <h5>後ろから1番目のh5</h5>
    <p>後ろから1番目のp</p>
</div>
    <div>&nbsp;</div>
<div>
    <p>後ろから2番目のp</p>
    <p>後ろから1番目のp</p>
    <h5>後ろから1番目のh5</h5>
</div>

後ろから2番目のp

後ろから1番目のh5

後ろから1番目のp

 

後ろから2番目のp

後ろから1番目のp

後ろから1番目のh5

F:only-child

兄弟要素がないF		 
<style>
    li:only-child{color: red;}
</style>

<ul>
    <li>兄弟要素なし</li>
</ul>
    <div>&nbsp;</div>
<ul>
    <li>兄弟要素あり</li>
    <li>兄弟要素あり
        <ul><li>兄弟要素なし</li></ul>
    </li>
    <li>兄弟要素あり</li>
</ul>
  • 兄弟要素なし
 
  • 兄弟要素あり
  • 兄弟要素あり
    • 兄弟要素なし
  • 兄弟要素あり

:only-of-type

同じタグの兄弟要素がない要素		 
<style>
    :only-of-type{color: red;}
</style>

<p>1つ目のp</p>
<h5>h5は1つだけ</h5>
<h6>1つ目のh6</h6>
<p>2つ目のp</p>
<div>divは1つだけ</div>
<h6>2つ目のh6</h6>

1つ目のp

h5は1つだけ
1つ目のh6

2つ目のp

divは1つだけ
2つ目のh6

F:not(X)

「Xに該当するF」以外のF		 
<style>
    p:not(.X){color: red;}
</style>

<p class="X">これは効かせない</p>
<p class="Y">効かせる</p>
<p class="Z">効かせる</p>

これは効かせない

効かせる

効かせる

F:empty

要素内がカラっぽのF		 
<style>
    div{height: 1.5em; background: #CCC; margin-bottom: 3px;}
    div:empty{background: red;}
</style>

<div></div>
<div><p></p></div>
<div>文字あり</div>
<div><!--コメントあり--></div>
<div> <!--空白あり--></div>
<div>
    <!--改行あり-->
</div>

文字あり

:target

ページ内リンクでジャンプしたとき		 
<style>
    p:target{color: red;}
</style>

<a href="#aaa">aaaにジャンプするよ</a>
<p id="aaa">ジャンプ先aaa</p>
<a href="#bbb">bbbにジャンプするよ</a>
<p id="bbb">ジャンプ先bbb</p>
 aaaにジャンプするよ

ジャンプ先aaa

bbbにジャンプするよ

ジャンプ先bbb

F:hover

Fがホバーされているとき		 
<style>
    a:hover{color: red;}
</style>
                    
<a>マウスを乗せて</a>
 マウスを乗せて

F:active

Fがクリックされているとき		 
<style>
    a:active{color: red;}
</style>
                    
<a>クリックして</a>
 クリックして

a:link

未訪問リンク		 
<style>
    a:link{color: blue;}
</style>

<a href="">未訪問</a>
 未訪問

a:visited

訪問済みリンク		 
<style>
    a:visited{color: purple;}
</style>
                    
<a href="">訪問済み</a>
 訪問済み

input:checked

選択されたinput		 
<style>
    input:checked + label{color: red;}
</style>

<input type="radio" name="checked" checked><label>選択済み</label>
<input type="radio" name="checked"><label>未選択</label>

input:focus

フォーカスされたinput		 
<style>
    input:focus{color: red;}
</style>
                    
<input type="text" value="色が変わる">

input:disabled

「disabled」がある
（無効になっている）input		 
<style>
    input:disabled{color: red;}
</style>

<input type="text" value="無効" disabled>
<input type="text" value="有効">

input:enabled

「disabled」がない
（有効になっている）input		 
<style>
    input:enabled{color: red;}
</style>

<input type="text" value="無効" disabled>
<input type="text" value="有効">

input:required

「required」がある
（必須項目である）input		 
<style>
    input:required{color: red;}
</style>

<input type="text" value="必須" required>
<input type="text" value="任意">

input:optional

「required」がない
（必須項目でない）input		 
<style>
    input:optional{color: red;}
</style>

<input type="text" value="必須" required>
<input type="text" value="任意">

input:invalid

エラーのとき		 
<style>
    input:invalid{color: red;}
</style>

<p>1文字ずつ消してみて</p>
<input type="text" value="文字数5文字以上でエラー" maxlength="5">
<input type="text" value="3文字">

1文字ずつ消してみて

input:valid

エラーではないとき		 
<style>
    input:valid{color: red;}
</style>

<p>1文字ずつ消してみて</p>
<input type="text" value="文字数5文字以上でエラー" maxlength="5">
<input type="text" value="3文字">

1文字ずつ消してみて

属性セレクタ

E[foo]

foo属性を持つE		 
<style>
    a[href]{color: red;}
</style>
                    
<ul>
    <li><a>リンクなし</a></li>
    <li><a href="text.html">text.html</a></li>
    <li><a href="text-center.pdf">text-center.pdf</a></li>
    <li><a href="next-center.html">next-center.html</a></li>
    <li><a href="next.pdf">next.pdf</a></li>
</ul>

E[foo="bar"]

foo属性がbarと一致するE		 
<style>
    a[href="text.html"]{color: red;}
</style>

<ul>
    <li><a>リンクなし</a></li>
    <li><a href="text.html">text.html</a></li>
    <li><a href="text-center.pdf">text-center.pdf</a></li>
    <li><a href="next-center.html">next-center.html</a></li>
    <li><a href="next.pdf">next.pdf</a></li>
</ul>

E[foo^="bar"]

foo属性がbarから始まるE		 
<style>
    a[href^="text"]{color: red;}
</style>

<ul>
    <li><a>リンクなし</a></li>
    <li><a href="text.html">text.html</a></li>
    <li><a href="text-center.pdf">text-center.pdf</a></li>
    <li><a href="next-center.html">next-center.html</a></li>
    <li><a href="next.pdf">next.pdf</a></li>
</ul>

E[foo$="bar"]

foo属性がbarで終わるE		 
<style>
    a[href$="html"]{color: red;}
</style>

<ul>
    <li><a>リンクなし</a></li>
    <li><a href="text.html">text.html</a></li>
    <li><a href="text-center.pdf">text-center.pdf</a></li>
    <li><a href="next-center.html">next-center.html</a></li>
    <li><a href="next.pdf">next.pdf</a></li>
</ul>

E[foo*="bar"]

foo属性がbarを含むE		 
<style>
    a[href*="center"]{color: red;}
</style>

<ul>
    <li><a>リンクなし</a></li>
    <li><a href="text.html">text.html</a></li>
    <li><a href="text-center.pdf">text-center.pdf</a></li>
    <li><a href="next-center.html">next-center.html</a></li>
    <li><a href="next.pdf">next.pdf</a></li>
</ul>

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む
CSSやhtmlをマンガで学ぶ