WEBセレクターの注意事項

ベースセレクター

1. ラベル セレクター
label+{}
例: div{ 属性: 属性値}

2.id セレクター
#+id+{}
例:#one{ 属性: 属性値}

3. クラス セレクター
.+クラス名+{}
例: .one{ 属性: 属性値}

4. ワイルドカードセレクター
*+{}

5. 子セレクター - 親である子を選択します
。クラス名 + ">" + li + {}

6. 子孫セレクター - すべての子孫を選択します
。クラス名 +" "+li+{}

7. 複合セレクター
label、label、label+{}
例: div、
p、
span{}

8. 属性セレクター
例:input[type="password"]{ }

疑似クラスセレクター

マウスオーバー
クラス名またはタグ名+": "+hover{ } eg.a:hover { /* カーソルマウススタイル*/ cursor: pointer; font-size: 40px; }

構造体擬似クラスセレクター

ul 内の行を選択して属性を変更します。
例: ul li:first-child { background-color:pink; }

ul li:last-child { 背景色: 緑; }

/* すべての属性から検索 */
ul li:nth-child(3) { background-color: blue; } /* li (選択した属性) から検索 */ ul li:nth-of-type(4 ) { background-色: シャルトルーズ; }

擬似要素セレクター

1. コンテンツの前後にコンテンツを追加します
(例:
ul li::before{ content: “~”; } ul li::after{ content: “<”; }

2. デフォルト値を追加します
eg.input::placeholder{ color: red; }

3. 選択時に色を変更します。
例: ul li:nth-child(4)::selection{ color: yellow; }