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>

IDセレクター

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

<style>
  #font10{
    font-size:10px;
  }
  #backPink{
    background:#FFBBBB;
  }
</style>

属性セレクター

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

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

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

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

<style>
  div.divclass{
    background:#FBB;
  }
</style>

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

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

<style>
  /* 「DIVタグのクラス"or1"」または「DIVタグのクラス"or2"」に適用する。 */
  div.or1 , div.or2{
    background:#FBB;
  }
</style>

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

要素名#IDセレクター

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

<style>
  div#divid{
    background:#FBB;
  }
</style>

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

要素A 要素B（子孫セレクター）

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

<style>
  div.divParent .allChildren{
    background:#FBB;
  }
</style>

要素A>要素B（子セレクター）

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

<style>
  div.divParent>.onlyChildren{
    background:#FBB;
  }
</style>

要素A+要素B（隣接セレクター）

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

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

要素A~要素B（間接セレクター）

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

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

要素A:first-child［疑似クラス］

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

<style>
  p.example_first:first-child{
    background:#FBB;
  }
</style>

要素A:last-child［疑似クラス］

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

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

要素A:first-of-type［疑似クラス］

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

<style>
  div.example_fot>p:first-of-type{
    background:#FBB;
  }
</style>

要素A:last-of-type［疑似クラス］

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

<style>
  div.example_lot>p:last-of-type{
    background:#FBB;
  }
</style>

要素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>

要素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>

要素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>

要素A:only-of-type［疑似クラス］

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

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

要素A:empty［疑似クラス］

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

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

要素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>

要素A:has(条件)［疑似クラス］

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

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

要素A::first-line［疑似要素］

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

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

要素A::first-letter［疑似要素］

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

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

要素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>