知っておくと便利なセレクタまとめ

CSS

セレクタの書き方様々

以下のHTMLを使ってセレクタについて説明をしていきたいと思います。

 <div class="test1">
   <h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  </div> 

  <div id="test2">
  	<h2>インコの種類</h2>
  	<p>
  		インコには沢山の種類がありますが、一番お手軽なのは<span>セキセイインコ</span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </div>

ブラウザ表示は以下

タグで指定

上記例で、例えばCSSでpタグをセレクタに指定し色を赤に変えたとします。

p{
  color: red;
}

するとpタグで囲まれた部分だけが赤になります。

ブラウザ表示

クラス名で指定

CSSでクラス名で指定する場合には

.ピリオド＋class名

を使います。
例えばクラス名で指定したdiv部分に背景を水色に指定した場合
HTMLで目印を付けておいたクラス名で.class名{}を使って記述をしていきます。

.test1{
background: skyblue;
}

p{
  color: red;
}
.test1{
  background: skyblue;
}

ブラウザ表示は以下

id名で指定

CSSでid名で指定する場合には
#(ハッシュ)＋id名

を使います。

id名で指定したdivタグで囲まれた部分の背景を銀色にしてみます。

#test2{
background:silver;
}

を加えます。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

ブラウザ表示は以下。

セレクタを複数指定

セレクタを複数指定することもできます。

その場合セレクタを,(コンマ)で区切っていきます。
例えばh1とｈ2両方の文字の色を金色に変えたいというような場合は

h1,h2{
color: gold;
}

と記述します。
もちろんクラス名やid名、他のタグ名でも複数指定できます。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

h1,h2{
  color: gold;
}

ブラウザ表示

セレクタを絞り込み指定

〇〇要素の中にある△△要素だけを指定したいというときには
セレクタ部分を

〇〇半角スペース△△｛｝

のように記述をしていきます。

このようにして絞り込まれたセレクタのことを子孫セレクタといいます。

例えばid名をtest2とつけたdivタグの中にあるspanタグを指定して色を緑、文字の大きさを二倍にしたいという場合。

#test2 span{
color: green ;
font-size: 2em;

}

と記述をします。

p{
  color: red;
}
.test1{
  background: skyblue;
}
#test2{
  background:silver;
}

h1,h2{
  color: gold;
}
#test2 span{
  color: green ;
  font-size: 2em;

}

今まですべてのCSSによるデザイン変更で以下のようになりました。

以上が基本的なセレクタの使い方ですが。
しかしセレクタは奥が深くて他にも様々なものがあって。
それらを知っておくことでデザインの自由度が高まります。
そんなセレクタの一部をまとめてみます。

知っていると役に立つセレクタ

全ての要素に対してスタイルを適用させたい場合に使うセレクタ

*（アスタリクス）

をセレクタに使うとそこで指定したデザインすべての要素に適用されます。
試しに全体の要素に対して枠をかけてみます。

先程のHTMLの記述をそのままにし。

 <div class="test1">
   <h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  </div> 

  <div id="test2">
  	<h2>インコの種類</h2>
  	<p>
  		インコには沢山の種類がありますが、一番お手軽なのは<span class=test3>セキセイインコ</span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </div>

CSSに以下の記述を加えます。

*{
border:dashed 3px red;
}

すべての要素に赤い破線の枠をつけるよう指定してあります。

*{
  border:dashed 3px red;
}

p{ 
  color: red; 
  }
.test1{ 
    background: skyblue; 
   } 
 #test2{
     background:silver; 
   }
 h1,h2{ 
        color: gold;
      }
  #test2 span{
         color: green ; font-size: 2em; 
      }

デザイン的にはかっこ悪いんですが、ブラウザ表示は以下のようになります。

すべての要素が赤い破線に囲まれています。

ある要素部分の全体に適用する場合

例えばpタグのデザインにだけ同じデザインを適用したいというような場合。
p *{}

pタグに限らず、指定したいタグやclass,idなどを前につけた上でその後に半角スペースと*（アスタリクス）を加えると
その部分のみのデザインを変えることができます。

先程のCSSで*（アスタリクスの前に最初のdivタグのクラス名を指定してみます。
そして以下のような記述を付け加えます。
.test1 *{
border:dashed 3px red;
}

背景を赤い破線の枠で囲む、と指定します。
ブラウザ表示

すると背景が青い部分の要素全てに枠がかかります。
一々要素ごとに指定しなくてもよいのでとても便利です^^;

子要素にのみ適用するセレクタ

要素の中からさらに子要素だけをデザインを指定しようとする場合。

親要素>小要素｛｝

という形でセレクタを設定します。

例えば先程の記述を変更してdivタグのうちclass名をtest1としたものの中にある子要素pだけデザインの変更をしたいという場合。

.test1 > p{
border:dashed 3px red;
}

と記述をすると

p{ 
  color: red; 
  }
.test1{ 
    background: skyblue; 
     } 
 #test2{
     background:silver; 
   }
 h1,h2{ 
        color: gold;
      }
   #test2 span {
         color: green ; font-size: 2em; 
      }
 .test1  > p{
  border:dashed 3px red;
}

ブラウザ表示は以下。

同じ階層のすぐ後や後ろ全部の要素に装飾が適用されるようにするセレクタ

セレクタの次に＋や～をつけることによって指定したセレクタの前や後の要素のみに装飾をすることができます。
使用例を書いてみます。

<p>これは前</p>
    <p class="center">ここが基準</p>
    <p>これは後ろ</p>
    <p>これは更に後ろ</p>

これは前

ここが基準

これは後ろ

これは更に後ろ

その上でCSSをいじってみます。
まず真ん中のClassを使ってそのすぐ後ろのセンテンスの文字を赤くしてみます。
classで目印を付けたその名前に＋を付けて下のpタグ要素を装飾します。

.class名 + 下のタグ名{}とします。

.center + p{
  color: red;
}

するとブラウザ表示は以下のようになります。

次に~を付けて目印を付けた要素の下をすべて装飾します。

.class名 ~ 下のタグ名{}とします。

.center~p{
  color: red;
}

すると以下のようにpタグの要素はすべて赤色なります。

何番目を装飾するかを指定する疑似要素を加えたセレクタ

表やリストに装飾を加える場合、何番目かを指定することができるととても便利です。
擬似クラスを使うことでそれができます。

CSS 擬似要素beforeとafter 使い方基本

例えば一例として以下を作ります。

一番目です
二番目です
三番目です
四番目です
五番目です。

これにCSSでアンダーラインをつけてみます。

ul li{
  border-bottom: solid 2px black;
　　}

すると以下のようになります。

最初や最後だけ装飾を変えるセレクタ

まず一番最後だけを指定する場合はセレクタを
◯:last-child {}
とします。
擬似クラスは last-child

CSSに変更を加え、一番下だけアンダーラインを破線にし、その色を赤にし、少し太くしてみます。

ul li{
  border-bottom: solid 2px black;

}
ul li:last-child{
  border-bottom: dashed 5px red;
}

すると以下のようになります。

更に最初のアンダーラインを緑色にして少し太くしたいなどという場合。

一番最後だけを指定する場合はセレクタを
◯:first-child {}
とします。
擬似クラスは first-child

CSSに以下の記述を加えます。

ul li:first-child{
  border-bottom: solid 5px green;
}

すると以下のようにブラウザ表示されます。

偶数・奇数・nの倍数ごとに装飾を変えるセレクタ

偶数・奇数ごとに装飾を変える事もできます。

偶数番目を指定する場合はセレクタを
◯: nth-child(even){ }
とします。
擬似クラスは nth-child(odd)

奇数番目を指定する場合はセレクタを
◯: nth-child(odd){ }
とします。
擬似クラスは nth-child(even)

それではまずCSSに変更を加えてリストの偶数ごとに背景色を水色に変えてみます。

ul li:nth-child(odd){
  background-color: skyblue;
}

すると以下のようにブラウザ表示されます。

次に更にCSSに変更を加えて奇数番目のリストの背景色を灰色にしてみます。

ul li:nth-child(odd){
  background-color: skyblue;
}

ul li:nth-child(even){
  background-color: grey;
}

すると以下のようにブラウザ表示されます。

nの倍数番目を指定して装飾をする場合もあるかと思います。

nの倍数を指定する場合はセレクタを
◯: nth-child(△n){ }
とします。
擬似クラスは nth-child(△n)

仮に３の倍数を指定した場合、先程のHTMLでは３番目だけが装飾されます。
３番目だけを赤い枠で囲んでみましょう

それを加えた全体のCSSは以下。


ul li:nth-child(odd){
  background-color: skyblue;
}

ul li:nth-child(even){
  background-color: grey;
}
ul li:nth-child(3n){
  border:solid 4px red;
  border:solid 4px red;
}

以下のようにブラウザ表示されます。