[JS] CSS Selector

🔷 선택자(Selector)

CSS 규칙을 적용할 요소를 정의

🔸 기본 선택자

1. * : 모든 요소를 선택한다.

* {
	color: red;
}

2. 요소 이름 : 특정 요소를 선택한다.

div {
	color: red;
}

3. . : 클래스, # : 아이디

.btn1 {
	color: red;
}

#btn {
	color: green;
}

class와 id의 차이?
class는 여러 가지 요소에 한 번에 스타일링을 적용하기 위해 묶을 때 사용하고, id는 고유 식별자와 같다고 생각하면 된다. id는 한 가지의 요소에만 적용할 수 있으며 중복 사용이 불가하다. (중복 사용한다고 해서 오류가 나지는 않지만 기존 id의 목적과 다르므로 권장되지 않는다.)

4. [attr] : 특정 타입을 가진 태그를 지정할 때 사용된다.

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

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

2. 그룹 선택자

1. , : 여러 요소를 한 번에 선택할 때 사용한다.

div, p {
	color: red;
}

3. 결합자

1. : 자손 결합자
   두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상에 앞쪽 선택자 요소가 존재할 경우 선택한다.

ul li {
	margin: 2em;
}

2. > : 자식 결합자
   두 개의 CSS 선택자 사이에 위치해 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우 선택한다.

ul > li {
	margin: 2em;
}

3. ~ : 일반 형제 결합자
   두 개의 선택자 사이에 위치해 뒤쪽 선택자의 요소와 앞쪽 선택자의 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다.
   쉽게 말해서 a ~ b 일 때 a 뒤에 있는 요소 중 b 태그에 해당하는 경우이다!

img ~ p {
	color: red;
}

4. + : 인접 형제 결합자
   앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택

img + p {
	font-weight: bold;
}

4. 가상 클래스 선택자

1. :hover : 마우스를 올렸을 때 적용된다.

button:hover {
	background-color: blue;
}

2. :focus : 해당 요소에 포커싱 되어 있을 때 적용된다. Tab 키 눌러서 선택되었을 경우.

button:focus {
	background-color: blue;
}

3. :active : 버튼을 눌렀을 때 같이 동작 시켰을 때 작동한다.

button:active {
	background-color: blue;
}

4. :disabled : 보이지 않게 숨길 때 작동한다.

5. :focus-visible
   디자인 적으로는 tab 키를 눌렀을 때도 hover 작동 안 하게 한다는데. 찾아보니 focus 스타일을 키보드 사용자에게만 보여줄 때 :focus-visible 속성을 사용하는 듯 하다. 웹 사이트에서 키보드 지원을 적절히 해줘야 모든 사용자에게 접근성을 향상시킬 수 있다.

+)

감추어져 있지 않은 버튼에 대해서만 hover 적용시키고 싶을 때

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

같이 :not() 속성을 이용할 수 있다.

checkbox 가상 클래스 선택 시

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 형태의 코드를 예로 들자.

1. :first-child
   요소 여러 개 중 첫 번째 요소이다. 위의 코드에서 첫 번째 li 인 list1의 서식이 변경된다.
2. :last-child
   요소 중 마지막 요소이다. list4의 서식이 변경된다.
3. :nth-child
   n번 째 요소가 변경된다. nth-child(3) 일 경우, list3이 변경된다.
4. :only-child
   부모의 유일한 자식인 노드일 경우 적용된다.
   
   
   

6. 가상 요소 선택자

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

1. ::before, ::after
   위 코드의 <span> 요소의 앞과 뒤에 가상 요소를 추가. 가상 요소 선택자를 사용할 때는 반드시 content: 항목을 사용해 주어야 한다.
2. ::placeholder
   input의 placeholder 속성을 변경할 때 사용된다.