ホームへ

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

2020年03月07日

主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。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を楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

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

擬似要素

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の基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ