トップへ(mam-mam.net/)

CSSのセレクター、疑似クラス、疑似要素の使い方

検索:

CSSのセレクター解説

ウェブデザインにおける重要な要素である以下のCSSセレクターについて詳しく解説します。

CSSのセレクター
全称セレクター 要素型セレクター classセレクター IDセレクター、属性セレクター 子孫セレクター 子セレクター 隣接セレクター 間接セレクター
疑似クラス
:first-child :last-child :first-of-type :last-of-type :nth-child(n) :nth-of-type(n) :nth-last-child(n) :nth-last-of-type(n) :only-child :only-of-type :empty,checked :active :hover :focus :not(条件) :has(条件)
疑似要素
::first-line ::first-letter ::before ::after

全称セレクター

(例)全ての要素を「マージン4px」「パディング8px」にする

<style>
  *{
    margin:4px;
    padding:2px;
  }
</style>

要素型セレクター

指定したタグ名(ノード名)の要素全てに適用
(例)h5タグ全ての背景を"#DDD"色にする

<style>
  h5{background:#DDD;}
</style>

<h4>この要素は適用されない</h4>

<h5>この要素に適用</h5>

クラスセレクター

指定したクラス属性を持つ全ての要素に適用

<style>
  .font12{
    font-size:12px;
  }
  .backBlue{
    background:#88AAFF;
  }
</style>
<div>フォントサイズはデフォルト

 <p class="backBlue">背景色が青っぽい色</p>

</div>
<div class="font12">フォントサイズ12px

 <p class="backBlue">背景色が青っぽい色</p>

 <p>背景色はデフォルト色</p>

</div>

IDセレクター

指定したID属性を持つ要素に適用

<style>
  #font10{
    font-size:10px;
  }
  #backPink{
    background:#FFBBBB;
  }
</style>
<div id="font10">フォントサイズ10px

 <p id="backPink">背景色がピンクっぽい色</p>

 <p>背景色はデフォルト色</p>

</div>

属性セレクター

指定した属性を持つ要素に適用

<style>
  /* href属性を持つ */
  [href]{
    background:#BBB;
  }
  /* href属性の値が"https://mam-mam.net/" */
  [href="https://mam-mam.net/"]{
    background:#FBB;
  }
  /* href属性の値が"/javascript."から始まる */
  [href^="/javascript."]{
    background:#BFB;
  }
  /* href属性の値が"display_flex.html"で終わる */
  [href$="display_flex.html"]{
    background:#BBF;
  }
  /* href属性の値が"js_pager"を含む */
  [href*="js_pager"]{
    background:#DDF;
  }
</style>
<a>リンク</a>
<a href="">#BBB</a>
<a href="https://mam-mam.net/">#FBB</a>
<a href="/javascript.html">#BFB</a>
<a href="/javascript/css_display_flex.html">#BBF</a>
<a href="/javascript/js_pager.html">#DDF</a>

要素名.クラス名セレクター

「要素名」かつ「クラス名」に適用

<style>
  div.divclass{
    background:#FBB;
  }
</style>
<div class="divclass">背景色が適用される</div>
<div>背景色は適用されない</div>

要素A,要素B セレクター

「要素A」又は「要素B」の両方に適用

<style>
  /* 「DIVタグのクラス"or1"」または「DIVタグのクラス"or2"」に適用する。 */
  div.or1 , div.or2{
    background:#FBB;
  }
</style>
<div class="or1">背景色が適用される</div>
<div class="or2">背景色が適用される</div>
<div class="or3">背景色は適用されない</div>
<div>背景色は適用されない</div>

<p class="or1">背景色は適用されない</p>

要素名#IDセレクター

「要素名」かつ「ID」に適用

<style>
  div#divid{
    background:#FBB;
  }
</style>
<div id="divid">背景色が適用される</div>
<div>背景色は適用されない</div>

<p id="divid">背景色は適用されない</p>

要素A 要素B(子孫セレクター)

「要素A」内の全ての子要素B、孫要素B、曽孫要素B、・・・に適用

<style>
  div.divParent .allChildren{
    background:#FBB;
  }
</style>
<div class="divParent">
 <div>背景色は適用されない</div>
 <div class="allChildren">背景色は適用される</div>
 <div>
  <div>背景色は適用されない

   <p class="allChildren">背景色は適用される</p>

  </div>
  <div class="allChildren">背景色は適用される</div>

  <p class="allChildren">背景色は適用される</p>

 </div>
</div>

要素A>要素B(子セレクター)

「要素A」内の全ての子要素のみの要素Bに適用
孫要素、曽孫要素、・・・には適用しない

<style>
  div.divParent>.onlyChildren{
    background:#FBB;
  }
</style>
<div class="divParent">
 <div>背景色は適用されない</div>
 <div class="onlyChildren">背景色は適用される</div>
 <div>
  <div>背景色は適用されない

   <p class="onlyChildren">背景色は適用されない</p>

  </div>
  <div class="onlyChildren">背景色は適用されない</div>

  <p class="onlyChildren">背景色は適用されない</p>

 </div>
 <div class="onlyChildren">背景色は適用される</div>
</div>

要素A+要素B(隣接セレクター)

同じ親要素内にある「要素A」より後に隣接する要素Bに適用

<style>
  h4+p.nearH4{
    background:#FBB;
  }
</style>
<div>

 <p class="nearH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <p class="nearH4">h4タグより後に隣接しているので背景色が適用される</p>

 <p class="nearH4">背景色が適用されない</p>

 <p class="nearH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <div>背景色が適用されない</div>

 <p class="nearH4">h4タグより後に隣接していないので背景色が適用されない</p>

 <p class="nearH4">背景色が適用されない</p>

</div>

要素A~要素B(間接セレクター)

同じ親要素内にある「要素A」より後の要素Bに適用

<style>
  h4~p.inDirectH4{
    background:#FBB;
  }
</style>
<div>

 <p class="inDirectH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <p class="inDirectH4">背景色が適用される</p>

 <p class="inDirectH4">背景色が適用される</p>

 <p>背景色が適用されない</p>

 <div>
  背景色が適用されない

  <p class="inDirectH4">背景色が適用されない</p>

 </div>

 <p>背景色が適用されない</p>

 <p class="inDirectH4">背景色が適用される</p>

</div>

要素A:first-child[疑似クラス]

「要素A」の親要素内にある最初の要素が「要素A」なら適用

<style>
  p.example_first:first-child{
    background:#FBB;
  }
</style>
<div>
 <div class="example_first">背景色が適用されない</div>

 <p class="example_first">背景色が適用されない</p>

</div>
<div>

 <p class="example_first">背景色が適用される</p>

 <p class="example_first">背景色が適用されない</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p class="example_first">背景色が適用されない</p>

</div>

要素A:last-child[疑似クラス]

「要素A」の親要素内にある最後の要素が「要素A」なら適用

<style>
  p.example_last:last-child{
    background:#FBB;
  }
</style>
<div>

 <p class="example_last">背景色が適用されない</p>

 <div class="example_last">背景色が適用されない</div>
</div>
<div>

 <p class="example_last">背景色が適用されない</p>

 <p class="example_last">背景色が適用される</p>

</div>
<div>

 <p class="example_last">背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>

要素A:first-of-type[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の最初の要素が適用

<style>
  div.example_fot>p:first-of-type{
    background:#FBB;
  }
</style>
<div class="example_fot">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_fot">

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>

要素A:last-of-type[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の最後の要素が適用

<style>
  div.example_lot>p:last-of-type{
    background:#FBB;
  }
</style>
<div class="example_lot">
 <div>背景色が適用されない</div>

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_lot">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>

要素A:nth-child(n)[疑似クラス]

「要素A」の親要素内にある全ての要素の中で「要素A」がn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

<style>
  /* 2番目に適用 */
  div.example_nthc>p:nth-child(2){
    background:#FBB;
  }
  /* 3の倍数番目(3,6,9,12,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n){
    background:#BFB;
  }
  /* 3の倍数+1番目(1,4,7,10,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n+1){
    background:#BBF;
  }
  /* 3の倍数+2番目(2,5,8,11,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n+2){
    background:#BFF;
  }
</style>
<div class="example_nthc">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_nthc">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthc3n">
 <div>背景色が適用されない</div>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>
<div class="example_nthc3n">

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>

要素A:nth-of-type(n)[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の中で「要素A」がn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

<style>
  /* 2番目に適用 */
  div.example_nthot>p:nth-of-type(2){
    background:#FBB;
  }
  /* 3の倍数番目(3,6,9,12,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n){
    background:#BFB;
  }
  /* 3の倍数+1番目(1,4,7,10,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n+1){
    background:#BBF;
  }
  /* 3の倍数+2番目(2,5,8,11,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n+2){
    background:#BFF;
  }
</style>
<div class="example_nthot">
 <div>背景色が適用されない</div>

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthot">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthot3n">
 <div>背景色が適用されない</div>

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

</div>
<div class="example_nthot3n">

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>

要素A:nth-last-child(n)[疑似クラス]

nth-child(n)とほぼ同じですが、要素を最後から数えるところが違います。
「要素A」の親要素内にある全ての要素の中で「要素A」が最後から数えてn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

要素A:nth-last-of-type(n)[疑似クラス]

nth-of-type(n)とほぼ同じですが、要素を最後から数えるところが違います。
「要素A」の親要素内にある全ての「要素A」の中で「要素A」が最後から数えてn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

要素A:only-child[疑似クラス]

「要素A」の親要素内で「要素A」が唯一の子要素の場合に適用されます。

<style>
  div.example_oc>p:only-child{
    background:#FBF;
  }
</style>
<div class="example_oc">

 <p>背景色が適用される</p>

</div>
<div class="example_oc">

 <p>背景色が適用されない</p>

 <div>背景色が適用されない</div>
</div>
<div class="example_oc">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <div class="example_oc">

  <p>背景色が適用される</p>

 </div>
</div>

要素A:only-of-type[疑似クラス]

「要素A」の親要素内に指定した「要素A」が1つの場合に適用されます。

<style>
  div.example_oot>p:only-of-type{
    background:#FBF;
  }
</style>
<div class="example_oot">

 <p>背景色が適用される</p>

</div>
<div class="example_oot">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

</div>
<div class="example_oot">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <div class="example_oot">

  <p>背景色が適用される</p>

 </div>
</div>

要素A:empty[疑似クラス]

「要素A」が子要素を持たない(テキストも持たない)場合に適用されます。

<style>
  div.example_emp>p:empty{
    background:#FBF;
    height:16px;
    width:64px;
    display:inline-block;
  }
</style>
<div class="example_emp">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <p>

←背景が適用されている</p>
</div>

要素A:checked[疑似クラス]

「要素A」がラジオボタン、チェックボックス、selectタグ内のオプションで、「要素A」がチェックされていたりONだった場合に適用されます。

<style>
  input[type="checkbox"]:checked{
    width:32px;
    height:32px;
  }
</style>
チェックボックスにチェックをすると大きくなります。

要素A:active[疑似クラス]

「要素A」がアクティブ時にスタイルが適用されます。

<style>
  .example_active{
    display:inline-block;
    margin:auto;
    padding:1.0em;
    color:#000;
    text-shadow:1px 1px 2px #999;
    background:#EEE;
    border:0px none #000;
    text-decoration:none;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
    cursor:pointer;
    border-radius:0px 0px 0px 0px;
    vertical-align:middle;
  }
  .example_active:active{
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  }
</style>
<a href="javascript:void(0)" class="example_active">ここでマウスボタンを押したままにするとスタイル適用</a>
ここでマウスボタンを押したままにするとスタイル適用

要素A:hover[疑似クラス]

「要素A」にマウスポインターを重ねた時にスタイルが適用されます。

<style>
  .example_hover{
    display:inline-block;
    margin:auto;
    padding:1.0em;
    color:#000;
    text-shadow:1px 1px 2px #999;
    background:#EEE;
    border:0px none #000;
    text-decoration:none;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
    cursor:pointer;
    border-radius:0px 0px 0px 0px;
    vertical-align:middle;
    transition:all 0.5s;
  }
  .example_hover:active{
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  }
  .example_hover:hover{
    background:#FBF;
  }
</style>
<a href="javascript:void(0)" class="example_hover">ここにマウスポインターを重ねるとスタイル適用</a>
(例)
ここにマウスポインターを重ねるとスタイル適用

要素A:focus[疑似クラス]

「要素A」にフォーカスがある時にスタイルが適用されます。

<style>
  .example_focus:focus{
    border:solid 4px #A00;
    outline:none;
  }
</style>
<input type="text" class="example_focus" value="フォーカス時に適用" />
(例)

要素A:not(条件)[疑似クラス]

条件に一致する対象を除いた要素Aにスタイルが適用されます。

<style>
  /* pタグで example_notクラスが指定されているが、
     not_classクラスが指定されていない要素に適用 */
  p.example_not:not(.not_class){
    background:#FBB;
  }
</style>
(例)

<p class="example_not">適用</p>

<p class="example_not">適用</p>

<p class="example_not not_class">適用されない</p>

要素A:has(条件)[疑似クラス]

条件に一致する子要素を持つ要素Aにスタイルが適用されます。

<style>
  /* class="has"のpタグの子要素にspanを持つ要素に適用 */
  p.has:has(span){
    background:#FBB;
  }
</style>
(例)

<p class="has">子要素にspanを持つので<span>適用</span></p>

<p class="has">
  子要素にspan要素を持たず、孫要素にspanを持つので適用されない

  <div><span>孫要素のspan</span></div>
</p>

<p class="has">子要素にspan要素を持たないので適用されない</p>

要素A::first-line[疑似要素]

要素Aの1行目のみにスタイルが適用されます。

<style>
  p.example_fl::first-line{
    background:#FBB;
  }
</style>
<p class="example_fl">1行目だけ適用<br>2行目は未適用</p>
(例)

1行目だけ適用
2行目は未適用

要素A::first-letter[疑似要素]

要素Aの1文字目のみにスタイルが適用されます。

<style>
  p.example_flt::first-letter{
    font-size:200%;
    font-weight:bold;
  }
</style>
<p class="example_flt">1文字目だけ適用</p>
(例)

1文字目だけ適用

要素A::before 及び 要素A::after[疑似要素]

要素Aの前(::before)及び 要素Aの後(after)にcontentプロパティで指定した値を入れることができます。

<style>
  p.example_bf::before{
    content:"■";
    color:blue;
    font-weight:bold;
  }
  p.example_bf::after{
    content:"New!!";
    color:red;
    font-weight:bold;
  }
</style>
<p class="example_bf">前後にcontentが付きます</p>
(例)

前後にcontentが付きます