turutani.com

【CSS】いろいろなセレクタの書き方

更新日:2019.05.16

アイキャッチ画像

 CSSセレクタについて．様々なセレクタの種類，指定方法を解説．

要素名(タグ名)で指定div{ }

 要素名(タグ名)で指定することでページ内にある指定した要素(タグ)全てに適用されます．

使用例
div{

}
/*すべてのdiv要素に適用*/

使用例
p{

}                
/*すべてのp要素に適用*/


idで指定#id{ }

 タグにidを付ければ，id名で指定できます．


 idはHTMLタグの中にid="id名"の形で記述します．

HTML
<p id="example">あいうえお</p>


 CSSで指定するときはid名の前にシャープ#をつけます．

使用例
#example{

}
/*「example」idを付与した要素に適用*/


クラスで指定.class{ }

 タグにクラスを付与すれば，クラス名で指定できます．


 クラスはHTMLタグの中にclass="クラス名"の形で記述します．

HTML
<p class="example">あいうえお</p>


CSSで指定するときはクラス名の前にドット(ピリオド).をつけます．

使用例
.example{

}
/*「example」クラスを付与した要素に適用*/



idとクラスの違い

 idとクラスは似ていますが，1回しか使えないか何度でも使えるかという違いがあります．

 idは同一ページ内に同じ名前のidがあってはいけません．

 それに対しクラスは同一ページ内で1つのクラス名を何度も使うことができます．



絞り込みa b{ }

 半角スペース(空白)で区切ることによって絞り込みができ，適用させたい要素をより限定させていくことができます．

使用例1
div p{

}
/*div要素内にあるp要素に適用*/


使用例2
.example div span{

}
/*クラス「example」内のdiv要素内のspan要素に適用*/


絞り込み(直下の要素のみ)a > b{ }

 不等号マーク(大なり記号)>でも絞り込みができます．

 半角スペースでの絞り込みとは違い，直下(1階層下)の子要素のみに対して絞り込みを行います．


 例えば，次のようなHTML構成の場合を考えます．

HTML
<div id="main">
    <p>AAAAAAA</p>
    <div>
        <p>BBBBBBB</p>
    </div>
</div>



css

#main p{
    color: red;
}

表示結果

AAAAAAA

BBBBBBB

 このような半角スペースでの絞り込みでは，<p>AAAAAAA</p>，<p>BBBBBBB</p>共に#example内のp要素という条件を満たしているので，両方にスタイルが適用されます．



css

#main > p{
    color: red;
}

表示結果

AAAAAAA

BBBBBBB

 一方，このような>を使った絞り込みを行うと，#exampleの直下のp要素という条件を満たしている<p>AAAAAAA</p>だけにスタイルが適用されます．(<p>BBBBBBB</p>は#mainから見て2階層下のp要素)




複数まとめて指定a , b{ }

 2つ以上のセレクタをカンマ,で区切ることによって複数のセレクタをまとめて指定できます．

使用例
#sample_1 , #sample_2{

}
/*id名「sample_1」,「sample_2」の要素に適用*/



隣接セレクタa + b{ }

 プラス記号+を使うと同じ階層で1つ次に隣接している要素を指定できます．

 次のようなHTML構成の場合， 
HTML                
<ul>
    <li>AAAAAAA</li>
    <li id="deco">BBBBBBB</li>
    <li>CCCCCCC</li>
    <li>DDDDDDD</li>
</ul>

+を使って，次のように書くと

css

#deco + li{
    color: red;
}

表示結果

  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
  • DDDDDDD
#decoと同じ階層で1つ次に隣接しているli要素である<li>CCCCCCC</li>にスタイルが適用されます．



間接セレクタa ~ b{ }

 間接セレクタは一般兄弟セレクタとも言われ，波線(チルダ)~を使って同じ階層の後ろに並ぶ要素(弟となる要素)に適用されます．


 例えば次の場合だと， 

HTML
<ul>
    <li>AAAAAAA</li>
    <li id="example">BBBBBBB</li>
    <li>CCCCCCC</li>
    <li>DDDDDDD</li>
    <li>EEEEEE</li>
</ul>


css

#example ~ li{
    color: red;
}

表示結果

  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
  • DDDDDDD
  • EEEEEE
#exampleと同じ階層の要素(兄弟要素)のなかで，後ろに並ぶli要素(弟要素)に適用されます．



例2



HTML
<div>
    <p>AAAAAAA</p>
    <p id="example">BBBBBBB</p>
    <p>CCCCCCC</p>
    <div>
        <p>DDDDDDD</p>
    </div>
    <p>EEEEEEE</p>
</div>


css

#example ~ p{
    color: red;
}

表示結果

AAAAAAA

BBBBBBB

CCCCCCC

DDDDDDD

EEEEEEE

 <p>DDDDDDD</p>は階層が一つ下なので適用されません．


最初・最後の要素だけa:first-child{ }   a:last-child{ }

 リスト要素など同じ階層に同じ要素がいくつも並んでいる場合，:first-child :last-childを使って，その中の最初・最後に現れている要素に適用させることができます．


 使う際はセレクタとfirst-child,last-childの間にコロン:を入れます．


 次のようなHTML構成の場合を考えます． 

HTML
<ul>
    <li>AAAAAAA</li>
    <li>BBBBBBB</li>
    <li>CCCCCCC</li>
    <li>DDDDDDD</li>
</ul>


css

li:first-child{
    color: red;
}

表示結果

  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
  • DDDDDDD
このようにfirst-childを使えば，一番最初に現れているli要素である<li>AAAAAAA</li>にスタイルが適用されます．



css

li:last-child{
    color: red;
}

表示結果

  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
  • DDDDDDD
last-childを使用すると，一番最後に現れているli要素の<li>DDDDDDD</li>にスタイルが適用されます．



例2



HTML
<div id="example">
    <h3>title</h3>
    <p>AAAAAAA</p>
    <p>BBBBBBB</p>
    <p>CCCCCCC</p>
    <p>DDDDDDD</p>
</div>



css

#example p:first-child{
    color: red;
}

表示結果

title

AAAAAAA

BBBBBBB

CCCCCCC

DDDDDDD

 この場合だと#examle内で1番最初に現れている要素がp要素でないためスタイルが適用されません．



css

#example p:last-child{
    color: red;
}

表示結果

title

AAAAAAA

BBBBBBB

CCCCCCC

DDDDDDD

 #example内で1番最後に現れているp要素の<p>DDDDDDD</p>に適用．


n番目の要素a:nth-of-type(n)

 リスト要素など同じ階層に同じ要素がいくつも並んでいる場合，:nth-of-type(n)で，その中のn番目の要素を直接指定することができます．

使う際はセレクタとfirst-child,last-childの間にコロン:を入れ，(n)の部分に適用させたい要素の番数をいれます． 


HTML
<ul>
    <li>AAAAAAA</li>
    <li>BBBBBBB</li>
    <li>CCCCCCC</li>
    <li>DDDDDDD</li>
    <li>EEEEEEE</li>
</ul>

css

li:nth-of-type(3){
    color: red;
}

表示結果

  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
  • DDDDDDD
  • EEEEEEE
 3番目のp要素である<p>DDDDDDD</p>にスタイルが適用されます．



 (n)の部分には数字以外を入れることもできます．

  •  :nth-of-type(even)・・・偶数番目の要素を指定2,4,6,8...
  •  :nth-of-type(odd)・・・奇数番目の要素を指定1,3,5,7...
  •  :nth-of-type(2n)・・・2の倍数番目の要素を指定2,4,6,8...
  •  :nth-of-type(2n+1)・・・2の倍数+1番目の要素を指定3,5,7,9...
  •  :nth-of-type(3n)・・・3の倍数番目の要素を指定3,6,9,12...
  •  :nth-of-type(3n+1)・・・3の倍数+1番目の要素を指定4,7,10,13...
  •  :nth-of-type(n+2)・・・最初の2つ以外の要素を指定3,4,5,6...

これらの他にも，4n,5n,3n-1など使い方次第で自由に指定できます．



例2



HTML
<div id="example">
    <p>AAAAAAA</p>
    <p>BBBBBBB</p>
    <p>CCCCCCC</p>
    <p>DDDDDDD</p>
</div>

css

#example p:nth-of-type(even){
    color: red;
}

表示結果

AAAAAAA

BBBBBBB

CCCCCCC

DDDDDDD

 #example内の偶数番目のp要素<li>BBBBBBBB</li>，<li>DDDDDDDDD</li>に適用．



要素の直前・直後a::before{ }   a::after{ }

 少し特殊なセレクタですが，コロン:を2つ並べた後にbeforeまたはafterと書けば要素の直前・直後にスタイルを挿入できます．


HTML
<p>あいうえお</p>

css

p::before{
    content: "「";
    color: red;
}

p::after{
    content: "」";
    color: red;
}

表示結果

「あいうえお」




 このように::before，::afterは，要素の前後に何かスタイルを挿入したいときに使います．


マウスオーバーした時のスタイルa:hover{ }

 :hoverでマウスオーバーした際のスタイルを指定できます．

マウスオーバーとはマウスカーソルを要素の上に重ねることです． 


HTML
<p>カーソルを重ねてください</p>

css

p:hover{
    color: red;
}

表示結果

カーソルを重ねてください

 この例では，p要素にカーソルを重ねた際に文字の色を赤にしています．


 セレクタとhoverの間にコロン:を入れることを忘れないようにしてください．


全称セレクタ*{ }

 アスタリスク*でページ内のすべての要素にスタイルが適用されます．

使用例
*{

}
/*すべての要素に適用*/

プロフィール

プロフィール画像（かぼちゃの絵）

こんにちわ.弦谷(つるたに)です.

Webサイト運用に関する記事をメインであげていきます.

福岡県在住

コメントフォーム


ページTOPへ