セレクター 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テキスト1番目</p>
  3.   <p>pテキスト2番目</p>
  4.   <p>pテキスト3番目</p>
  5.   <p>pテキスト4番目</p>
  6.   <p>pテキスト5番目</p>
  7.   <p>pテキスト6番目</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) 2番めのp要素にスタイルを適用
p:nth-child(odd)
p:nth-child(even)
奇数のp要素
偶数のp要素
p:nth-child(2n+1)
p:nth-child(2n+2)
2つおきの1つ目のp要素
2つおきの2つ目のp要素
p:nth-child(3n+1)
p:nth-child(3n+2)
p:nth-child(3n+3)
3つおきの1つ目のp要素
3つおきの2つ目のp要素
3つおきの3つ目のp要素
p:nth-child(n+4) 4番目 以 降 のp要素
p:nth-child(-n+4) 4番目 以 前 のp要素
p:nth-child(n+2):nth-child(-n+4) 2番目以降から4番目以前のp要素
要素のナンバーを指定してCSSプロパティを適用する場合

HTML

  1. <div>
  2.   <p>pテキスト1番目</p>
  3.   <p>pテキスト2番目</p>
  4.   <p>pテキスト3番目</p>
  5.   <p>pテキスト4番目</p>
  6.   <p>pテキスト5番目</p>
  7.   <p>pテキスト6番目</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テキスト1番目</p>
  3.   <p>pテキスト2番目</p>
  4.   <p>pテキスト3番目</p>
  5.   <p>pテキスト4番目</p>
  6.   <p>pテキスト5番目</p>
  7.   <p>pテキスト6番目</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>2つおきの場合</h2>
  2. <div class=“samp1”>
  3.   <p>pテキスト1番目</p>
  4.   <p>pテキスト2番目</p>
  5.   <p>pテキスト3番目</p>
  6.   <p>pテキスト4番目</p>
  7.   <p>pテキスト5番目</p>
  8.   <p>pテキスト6番目</p>
  9.  </div>
  10. <h2>3つおきの場合</h2>
  11. <div class=“samp2”>
  12.   <p>pテキスト1番目</p>
  13.   <p>pテキスト2番目</p>
  14.   <p>pテキスト3番目</p>
  15.   <p>pテキスト4番目</p>
  16.   <p>pテキスト5番目</p>
  17.   <p>pテキスト6番目</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. }
  7. div.samp2 p:nth-child(3n+1){
  8.   background-color:blue;
  9. }
  10. div.samp2 p:nth-child(3n+2){
  11.   background-color:yellow;
  12. }
  13. div.samp2 p:nth-child(3n+3){
  14.   background-color:red;
  15. }

 

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テキスト1番目</p>
  4.   <p>pテキスト2番目</p>
  5.   <p>pテキスト3番目</p>
  6.   <p>pテキスト4番目</p>
  7.   <p>pテキスト5番目</p>
  8.   <p>pテキスト6番目</p>
  9.  </div>
  10. <h2>4番目 以 前 の場合</h2>
  11. <div class=“samp2”>
  12.   <p>pテキスト1番目</p>
  13.   <p>pテキスト2番目</p>
  14.   <p>pテキスト3番目</p>
  15.   <p>pテキスト4番目</p>
  16.   <p>pテキスト5番目</p>
  17.   <p>pテキスト6番目</p>
  18.  </div>
  19. <h2>2番目以降4番目以前の場合</h2>
  20. <div class=“samp3”>
  21.   <p>pテキスト1番目</p>
  22.   <p>pテキスト2番目</p>
  23.   <p>pテキスト3番目</p>
  24.   <p>pテキスト4番目</p>
  25.   <p>pテキスト5番目</p>
  26.   <p>pテキスト6番目</p>
  27.  </div>

 

CSS

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

 

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.

スポンサードリンク

スポンサードリンク