CSSセレクタの種類と使用方法

複合セレクタ

定義: 2つ以上の基本セレクタを異なる方法で組み合わせて作成されます。

目的: より正確で効率的に対象要素（タグ）を選択します。

<span>spanタグ</span>

<div>
	<span>テキストの色は緑色です</span>
</div>

子孫セレクタ

子孫セレクタ: 特定の要素の子孫要素を選択します。

セレクタの記述方法: 親セレクタ子セレクタ {CSSプロパティ}、親子セレクタの間にスペースを入れて区切ります。

<style>
    div span {
   		color:red;
    }
</style>

<span>spanタグ</span>

<div>
	<span>これはdivの直下のspanです</span>
</div>

直接子セレクタ

<style>
    div > span {
   		color:red;
    }
</style>

<div>
	<span>これはdiv内の直接の子spanです</span>
    <p>
        <span>これはdiv内のp内のspanです</span>
    </p>
</div>

直接子セレクタ: 特定要素の直接の子要素（最も近いレベルの子）を選択します。

セレクタの記述方法: 親セレクタ > 子セレクタ {CSSプロパティ}、親子セレクタの間に > を入れて区切ります。

グループセレクタ

グループセレクタ: 複数のタググループに同じスタイルを設定します。

セレクタの記述方法: セレクタ1,セレクタ2,…,セレクタN{CSSプロパティ}、セレクタの間にカンマを入れて区切ります。

<style>
    div,
    p,
    span {
    	color: red;
    }
</style>

<div>divタグ</div>
<p>pタグ</p>
<span>spanタグ</span>

交差セレクタ

交差セレクタ: 同時に複数の条件を満たす要素を選択します。

<p class="container">pタグ、containerクラスを使用</p>
<p>pタグ</p>
<div class="container">divタグ、containerクラスを使用</div>

セレクタの記述方法: セレクタ1セレクタ2{CSSプロパティ}、セレクタ間を連記し、記号は使用しません。

/* pタグであり、かつcontainerクラスを持つ要素 */
p.container {
	color: red;
}

注意: 交差セレクタにタグセレクタが含まれている場合、タグセレクタは必ず最前面に記述する必要があります。

擬似クラスセレクタ

擬似クラスセレクタ: 要素の状態を表し、特定の状態にある要素にスタイルを設定します。

マウスホバー状態: セレクタ:hover{CSSプロパティ}

<style>
    /* あらゆるタグにマウスホバー状態を設定できます */
	a:hover {
		color: red;
	}
	.container:hover {
		color: green;
	}
</style>

<a href="#">リンクタグ</a>
<div class="container">divタグ</div>

擬似クラス - ハイパーリンク

ハイパーリンクには合計4つの状態があります。

セレクタ	役割
:link	訪問前
:visited	訪問後
:hover	マウスホバー
:active	クリック時（アクティブ状態）

ヒント: ハイパーリンクに上記4つの状態を設定する場合、LVHAの順序で記述する必要があります。

CSSの特性

CSSの特性: コードの簡略化 / 問題の特定と解決

継承性
カスケード性
優先順位

継承性

継承性: 子要素は親要素の文字関連プロパティをデフォルトで継承します。

body {
    font:12px/1.5 Microsoft YaHei,Heiti sc,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color:#666;
}

<style>
    body {
        font-size: 30px;
        color: red;
        font-weight:700;
    }	
</style>

<div>divタグ</div>
<p>pタグ</p>
<span>spanタグ</span>

/* タグ自身にスタイルがあれば、自身のスタイルが有効になり継承されない */
<a href="#">aタグ</a>
<h1>h1タグ</h1>

カスケード性

特徴:

同じプロパティは上書きされます: 後のCSSプロパティが前のCSSプロパティを上書きします
異なるプロパティは重なります: 異なるCSSプロパティはすべて有効になります

<style>
    div {
        color:red;
        font-weight:700;
    }
    div {
   		color:green;
    	font-size:30px;
    }
</style>

<div>divタグ</div>

優先順位

優先順位: またの名を「ウェイト」といいます。あるタグが複数のセレクタを使用している場合、異なる種類のセレクタのマッチングルールに基づいて決まります。

<style>
	div {
		color:red;
	}
	.container {
		color:green;
	}
</style>

<div class="container">divタグ</div>

ルール: セレクタの優先順位が高いスタイルが有効になります。

公式: ワイルドカードセレクタ < タグセレクタ < クラスセレクタ < IDセレクタ < インラインスタイル < !important

（タグを選択する範囲が広いほど、優先順位は低くなります）

<style>
    /* テクニック: セレクタが選択するタグの範囲が広いほど、優先順位/ウェイトは低くなります */
    div {
    	color: green;
    }
    
    /* !importantは権限を強化し、ウェイト/優先順位を最高にします。使用には注意してください */
    * {
    	color: red !important;
    }

    .container {
    	color: blue;
    }
    
    #target {
    	color: orange;
    }
</style>

<div class="container" id="target" style="color:purple;">divタグ</div>

優先順位 - 重ね合わせ計算ルール

重ね合わせ計算: 複合セレクタの場合、ウェイトを重ねて計算する必要があります。

公式: （各レベル間には桁上がりはありません）

（インラインスタイル、IDセレクタの数、クラスセレクタの数、タグセレクタの数）

ルール:

左から右へ順に数を比較し、同じレベルで数が多い方が優先順位が高い。数が同じ場合は後方を比較します
!importantが最も高いウェイトを持つ
継承されたウェイトが最も低い

Emmet記法

Emmet記法: コードの省略記述方式。略語を入力するとVS Codeが対応するコードを自動生成します。

HTML（vs code/webstormでtabキーを押す）

説明	タグ構造	Emmet
クラスセレクタ	<div></div>	タグ名.クラス名
IDセレクタ	<div></div>	タグ名#ID名
同レベルのタグ	<div></div><p></p>	div+p
親子関係のタグ	<div><p></p></div>	div>p
同じタグの複数生成	<span>123</span><span>123</span><span>123</span>	span*3
内容のあるタグ	<div>内容</div>	div{内容}

CSS: 多くの省略記述はプロパティの単語の頭文字です

背景プロパティ

説明	プロパティ
背景色	background-color
背景画像	background-image
背景画像の繰り返し方法	background-repeat
背景画像の位置	background-position
背景画像のサイズ	background-size
背景画像の固定	background-attachment
背景の複合プロパティ	background

背景画像の繰り返し方法

プロパティ名: background-repeat(bgr)

プロパティ値:

プロパティ値	効果
no-repeat	繰り返さない
repeat	繰り返す（デフォルト）
repeat-x	水平方向に繰り返す
repeat-y	垂直方向に繰り返す

背景画像の位置

プロパティ名: background-position(bgp)

プロパティ値: 水平方向の位置垂直方向の位置

キーワード

キーワード	位置
left	左側
right	右側
center	中央
top	上部
bottom	下部

座標（数字+px、正負可）

水平: 正の数は右へ、負の数は左へ

垂直: 正の数は下へ、負の数は上へ

ヒント:

キーワードの値の記述順序は逆にできます
1つのキーワードのみ記述した場合、もう一方の方向は中央になります。数字を1つだけ記述した場合、水平方向を表し、垂直方向は中央になります

背景画像のサイズ

役割: 背景画像のサイズを設定します。

プロパティ名: background-size(bgz)

一般的なプロパティ値:

キーワード

cover: 背景領域を完全に覆うように背景画像を等比拡大縮小し、背景画像の一部が非表示になる可能性があります

contain: 背景領域に完全に収まるように背景画像を等比拡大縮小し、背景領域の一部が空白になる可能性があります

パーセンテージ: ボックスサイズに基づいて画像サイズを計算します
数字+単位（例: px）

背景画像の固定

役割: 背景が要素のコンテンツのスクロールに伴って移動しません。

プロパティ名: background-attachment(bga)

プロパティ値: fixed

背景の複合プロパティ

プロパティ名: background(bg)

プロパティ値: 背景色背景画像背景画像の繰り返し方法背景画像の位置/背景画像のサイズ背景画像の固定（各プロパティ値をスペースで区切り、順序は問いません）

表示モード

表示モード: タグ（要素）の表示方法

役割: ウェブページをレイアウトする際に、タグの表示モードに基づいて適切なタグを選択してコンテンツを配置します。

ブロックレベル要素（divタグを代表）

1行を占有
幅はデフォルトで親の100%
幅と高さのプロパティが有効

インライン要素

1行に複数表示可能
幅と高さのプロパティが無効
幅と高さはコンテンツによって決定

インラインブロック要素

1行に複数表示可能
幅と高さのプロパティが有効
幅と高さはコンテンツによっても決定可能

表示モードの変換

プロパティ名: display