ホーム > HTML/CSS > セレクター　CSS

セレクター　CSS

なわて投稿サムネイル

CSSのセレクタ

CSSプロパティの適用先。

ユニバーサルセレクタ
タイプセレクタ
クラスセレクタ
IDセレクタ
結合子を使ったセレクタ（子孫セレクタ等）
セレクターのグループ化（カンマ区切り）
擬似クラス
疑似要素

 

ユニバーサルセレクター

すべての要素に対してCSSプロパティを適用できるセレクター。

    1. <body>
  1.   <h2>テキストテキストテキスト</h2>
  2.   <p>pテキストpテキストpテキストpテキスト</p>
  3.   <h2>テキストテキストテキスト</h2>
  4.   <p>pテキストpテキストpテキストpテキスト</p>
  5.   <h2>テキストテキストテキスト</h2>
  6.   <p>pテキストpテキストpテキストpテキスト</p>
  7. </body>

  1. *{
  2.   color:red;
  3. }

 

See the Pen
ユニバーサルセレクター by roymoy (@roymoy)
on CodePen.

 

タプセレクター

指定した要素にCSSプロパティを適用する。

  1. <body>
  2.   <h2>テキストテキストテキスト</h2>
  3.   <p>pテキストpテキストpテキストpテキスト</p>
  4.   <h2>テキストテキストテキスト</h2>
  5.   <p>pテキストpテキストpテキストpテキスト</p>
  6.   <h2>テキストテキストテキスト</h2>
  7.   <p>pテキストpテキストpテキストpテキスト</p>
  8. </body>

  1. body{
  2.   background-color:linen;
  3. }
  4. h2{
  5.   font-size:24px;
  6. }
  7. p{
  8.   color:darkgreen;
  9. }

 

See the Pen
タイプセレクター by roymoy (@roymoy)
on CodePen.

 

クラスセレクター

指定したクラス属性の値にCSSプロパティを適用。
「.」とクラス属性の値をつなげて表記。
class属性はドキュメント内で何箇所も設置可能。

  1. <h2 class=“head2”>h2テキストh2テキスト<h2>

  1. h2.head2{
  2.   color:green;
  3.   background-color:palegreen;
  4.   padding:20px;
  5.   width:250px;
  6.   font-size:22px;
  7. }

 

See the Pen
クラスセレクター by roymoy (@roymoy)
on CodePen.

 

IDセレクター

指定したID属性の値にCSSプロパティを適用。
#とID属性の値をあわせて表記
ID属性はドキュメント内で一意となる。

  1. <h2 id=“head2”>h2テキストh2テキスト</h2>
  2. <h2>h2テキストh2テキスト</h2>
  3. <h2>h2テキストh2テキスト</h2>

  1. h2#head2{
  2.   color:green;
  3.   background-color:palegreen;
  4.   padding:20px;
  5.   width:250px;
  6.   font-size:22px;
  7. }

 

See the Pen
abzPYjP by roymoy (@roymoy)
on CodePen.

 

結合子を利用したセレクター

 

子孫セレクター　要素A　半角スペース　要素B

複数のタイプセレクターを半角スペースでつなぐ。
タイプセレクターを組み合わせて絞り込み、適用範囲を狭める。

  1. <div><article><p>30px</p></article></div>
  2. <div><p>20px</p></div>
  3. <p>10px</p>

  1. div article p{
  2.   font-size: 30px;
  3. }
  4. div p{
  5.   font-size:20px;
  6. }
  7. p{
  8.   font-size:10px;
  9. }

 

See the Pen
XWJoqWO by roymoy (@roymoy)
on CodePen.

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

親要素Aが内包するすべての子要素B(1階層下)にのみ適用される。

HTML

<body>
  <h1>h1テキストh1テキスト</h1>
  <p>pテキストpテキストpテキストpテキスト</p>
  <div>
    <h2>h2テキストh2テキスト</h2>
    <p>pテキストpテキストpテキストpテキスト</p>
    <h2>h2テキストh2テキスト</h2>
    <p>pテキストpテキストpテキストpテキスト</p>    
  </div>
  </body>

CSS

body > p{
  color:pink;
}

div > p{
  color:green;
}

See the Pen
子セレクタ by roymoy (@roymoy)
on CodePen.

グループ化（カンマ区切り）要素A , 要素B

複数の要素に同一のCSSプロパティを適用する。
同一のCSSプロパティを適用したい要素を（カンマ）「 , 」でつなぐ。

HTML

  1. <body>
  2.   <h1>h1テキストh1テキスト</h1>
  3.   <p>pテキストpテキストpテキストpテキスト</p>
  4.   <div>
  5.     <h2>h2テキストh2テキスト</h2>
  6.     <p>pテキストpテキストpテキストpテキスト</p>
  7.     <h2>h2テキストh2テキスト</h2>
  8.     <p>pテキストpテキストpテキストpテキスト</p>
  9.   </div>
  10.   </body>

 

CSS

  1. h1,h2{
  2.   color: green;
  3. }

 

See the Pen
カンマ区切り by roymoy (@roymoy)
on CodePen.

擬似クラス

 

ダイナミック擬似クラス

:link

:visited

:hover

:focus

:active

 

構造擬似クラス

:root
:first-child
:last-child
:nth-child
:nth-last-child

:root

:first-child と :last-child

最初と最後の要素にCSSプロパティを適用する。

HTML

  1. <div>
  2.   <p>pテキスト１番目</p>
  3.   <p>pテキスト２番目</p>
  4.   <p>pテキスト３番目</p>
  5.   <p>pテキスト４番目</p>
  6.   <p>pテキスト５番目</p>
  7.   <p>pテキスト６番目</p>
  8.  </div>

 

CSS

  1. p:first-child{
  2.   background-color:olive;
  3. }
  4. p:last-child{
  5.   background-color:olivedrab;
  6. }

 

See the Pen
firstchild-lastchild by roymoy (@roymoy)
on CodePen.

:nth-child

ナンバーを指定してCSSプロパティを適用する。
親要素が複数ある場合には親要素ごとに適用される。

パターン 内容（スタイル適用）
p : nth-child(2) ２番めのp要素にスタイルを適用
p:nth-child(odd)
p:nth-child(even)		 奇数のp要素
偶数のp要素
p:nth-child(2n+1)
p:nth-child(2n+2)		 ２つおきの１つ目のp要素
２つおきの２つ目のp要素
p:nth-child(3n+1)
p:nth-child(3n+2)
p:nth-child(3n+3)		 ３つおきの１つ目のp要素
３つおきの２つ目のp要素
３つおきの３つ目のp要素
p:nth-child(n+4) ４番目　以 降　のp要素
p:nth-child(-n+4) ４番目　以 前　のp要素
p:nth-child(n+2):nth-child(-n+4) ２番目以降から４番目以前のp要素
要素のナンバーを指定してCSSプロパティを適用する場合

HTML

  1. <div>
  2.   <p>pテキスト１番目</p>
  3.   <p>pテキスト２番目</p>
  4.   <p>pテキスト３番目</p>
  5.   <p>pテキスト４番目</p>
  6.   <p>pテキスト５番目</p>
  7.   <p>pテキスト６番目</p>
  8.  </div>

CSS

  1. div p:nth-child(2){
  2.   background-color:olive;
  3. }
  4. div p:nth-child(5){
  5.   background-color:olivedrab;
  6. }

 

See the Pen
nth-child1 by roymoy (@roymoy)
on CodePen.

奇数と偶数

HTML

  1. <div>
  2.   <p>pテキスト１番目</p>
  3.   <p>pテキスト２番目</p>
  4.   <p>pテキスト３番目</p>
  5.   <p>pテキスト４番目</p>
  6.   <p>pテキスト５番目</p>
  7.   <p>pテキスト６番目</p>
  8.  </div>

 

CSS

  1. div p:nth-child(odd){
  2.   background-color:olive;
  3. }
  4. div p:nth-child(even){
  5.   background-color:orange;
  6. }

 

See the Pen
偶数奇数 by roymoy (@roymoy)
on CodePen.

2n+1 3n+1連続した要素に一定に繰り返す場合

HTML

  1. <h2>２つおきの場合</h2>
  2. <div class=“samp1”>
  3.   <p>pテキスト１番目</p>
  4.   <p>pテキスト２番目</p>
  5.   <p>pテキスト３番目</p>
  6.   <p>pテキスト４番目</p>
  7.   <p>pテキスト５番目</p>
  8.   <p>pテキスト６番目</p>
  9.  </div>
  10. <h2>３つおきの場合</h2>
  11. <div class=“samp2”>
  12.   <p>pテキスト１番目</p>
  13.   <p>pテキスト２番目</p>
  14.   <p>pテキスト３番目</p>
  15.   <p>pテキスト４番目</p>
  16.   <p>pテキスト５番目</p>
  17.   <p>pテキスト６番目</p>
  18.  </div>

 

CSS

  1. div.samp1 p:nth-child(2n+1){
  2.   background-color:olive;
  3. }
  4. div.samp1 p:nth-child(2n+2){
  5.   background-color:orange;
  6. }
  8. div.samp2 p:nth-child(3n+1){
  9.   background-color:blue;
  10. }
  11. div.samp2 p:nth-child(3n+2){
  12.   background-color:yellow;
  13. }
  14. div.samp2 p:nth-child(3n+3){
  15.   background-color:red;
  16. }

 

See the Pen
2n+1,3n+1 by roymoy (@roymoy)
on CodePen.

以降(samp1)と以前(samp2)とその間(samp3)の要素にスタイルを適用

HTML

  1. <h2>4番目　以 降　の場合</h2>
  2. <div class=“samp1”>
  3.   <p>pテキスト１番目</p>
  4.   <p>pテキスト２番目</p>
  5.   <p>pテキスト３番目</p>
  6.   <p>pテキスト４番目</p>
  7.   <p>pテキスト５番目</p>
  8.   <p>pテキスト６番目</p>
  9.  </div>
  11. <h2>４番目　以 前　の場合</h2>
  12. <div class=“samp2”>
  13.   <p>pテキスト１番目</p>
  14.   <p>pテキスト２番目</p>
  15.   <p>pテキスト３番目</p>
  16.   <p>pテキスト４番目</p>
  17.   <p>pテキスト５番目</p>
  18.   <p>pテキスト６番目</p>
  19.  </div>
  21. <h2>２番目以降４番目以前の場合</h2>
  22. <div class=“samp3”>
  23.   <p>pテキスト１番目</p>
  24.   <p>pテキスト２番目</p>
  25.   <p>pテキスト３番目</p>
  26.   <p>pテキスト４番目</p>
  27.   <p>pテキスト５番目</p>
  28.   <p>pテキスト６番目</p>
  29.  </div>

 

CSS

  1. div.samp1 p:nth-child(n+4){
  2.     background-color:olive;
  3.   }
  5. div.samp2 p:nth-child(-n+4){
  6.     background-color:olive;
  7.   }
  9. div.samp3 p:nth-child(n+2):nth-child(-n+4){
  10.     background-color:olive;
  11.   }

 

See the Pen
以前・以降・その間 by roymoy (@roymoy)
on CodePen.

:nth-last-child

 

疑似要素

::before ::after

要素の前（::before)と後ろ(::after)に擬似的な下層BOXを挿入することができる。
BOX内の内容の指定は、contentプロパティを使用する。

HTML

<div class="fukidashi">テキストテキストテキストテキストテキストテキスト</div>

CSS

.fukidashi {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
  border:solid 2px steelblue;
}

/*下*/
.fukidashi::before {
  position: absolute;
  content: '';/*空に*/
  border-top: 12px solid steelblue;/*三角を作る*/
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  top: 100%;/*下*/
  left: 50%;/*中央配置*/
  transform: translateX(-50%);/*ズレを補正*/
}

/*左側*/
.fukidashi::after {
  content: "";/*空に*/
  display: inline-block;
  position: absolute;
  top: 18px; /*位置を補正*/
  left: -24px;
  border: 12px solid transparent;/*三角を作る*/
  border-right: 12px solid steelblue;
}

実装

See the Pen
疑似要素::before::after by roymoy (@roymoy)
on CodePen.

スポンサードリンク

スポンサードリンク