[JS] CSS Selector

🔷 セレクタ

CSSルールを適用する要素の定義

🔸 デフォルトの選択者

*:すべての要素を選択

* {
	color: red;
}

요소 이름:特定の要素を選択

div {
	color: red;
}

.:クラス、#:アイデンティティ

.btn1 {
	color: red;
}

#btn {
	color: green;
}

classとidの違いは?
classは、スタイルを複数の要素に一度に適用し、idを一意の識別子と見なすために使用されます.idは1つの要素にしか適用できず、繰り返し使用できません.(繰り返し使用するとエラーは発生しませんが、既存のidの目的とは異なりますので、推奨しません.)

[attr]:特定のタイプのタグを指定します.

input[type="text"] {
	border-color: red;
}

img[alt] {
	border: 1px solid;
}

2.グループセレクタ

,:複数の要素を同時に選択できます.

div, p {
	color: red;
}

3.結合者

:子結合子
2つのセレクタを組み合わせて、後のセレクタ要素の祖先に前のセレクタ要素が存在する場合に選択します.

ul li {
	margin: 2em;
}

>:子バインディング
2つのCSSセレクタの間にあり、後ろのセレクタの要素が前のセレクタ要素の真下にある場合は、その要素を選択します.

ul > li {
	margin: 2em;
}

~:一般同級キー
2つの選択者の間にあり、後ろの選択者の要素は前の選択者の要素の親要素と同じであり、後ろの選択者の要素は後ろにある場合に選択されます.
簡単に言えば、a~bの場合、aの後ろの要素の中でbラベルに相当する!

img ~ p {
	color: red;
}

+:隣の兄弟
前に指定した要素に続く兄弟要素のみを選択します

img + p {
	font-weight: bold;
}

4.仮想クラスセレクタ

:hover:マウスの停止時に有効です.

button:hover {
	background-color: blue;
}

:focus:要素にフォーカスした場合に適用されます.TABキーを押して選択します.

button:focus {
	background-color: blue;
}

:active:ボタンを押すと一緒に作業します.

button:active {
	background-color: blue;
}

:disabled:非表示の場合は表示されません.

:focus-visibleデザイン的にはtabキーを押すときもサスペンションが働かないようにすることができます.ブラウズすると、focus-visibleプロパティがキーボードユーザーに表示されている場合にのみfocus-visibleスタイルが使用されます.すべてのユーザーのアクセス能力を向上させるには、Webサイトで適切なキーボードサポートを提供する必要があります.

+)

非表示のボタンにマウスを置くだけで

button:not(:disabled):hover {
	background-color: red;
}

:not()プロパティも使用できます.
チェックボックス仮想クラスが選択されている場合

input[type="checkbox"]:checked + label {
	color: blue;
}

同じ:checkedプロパティを使用することもできます.

5.仮想クラスセレクタ(child)

  <ul>
    <li> list1 </li>
    <li> list2 </li>
    <li> list3 </li>
    <li> list4 </li>
  <ul>

上記SCSS形式のコードを例にとります.

:first-child多くの要素の中で第一の要素です.上記のコードでは、最初のlilist 1のフォーマットが変更されます.

:last-child要素の最後の要素.List 4のフォーマットが変更されます.

:nth-childn n n番目の要素を変更します.nth-child(3)の場合、list 3が変更されます.

:only-childノードが親の唯一の子供である場合に適用されます.

6.仮想要素セレクタ

span {
	&::before {
		content: '(';
	}
	&::after {
		content: ')';
	}
}

::before , ::after上記のコードの<span>要素の前後に仮想要素を追加します.仮想要素セレクタを使用する場合は、content:アイテムを使用する必要があります.

::placeholderInputのプレースホルダ属性を変更します.