[CSS] 선택자

1. 기본 선택자

1) * 전체 : 초기 설정 시에 한번만 사용. 너무 많이 쓰면 css 성능 저하

2) div 요소

3) . 클래스

4) # 아이디

5) [attr] 특성

 

클래스와 다르게 아이디는 중복이 불가능함. 

 

2.  , 그룹 선택자

다중으로 여러 개 선택 가능

.box1, box2 {
	color : red;
}

 다중 클래스를 선택할 경우, 공백없이 입력

 

3. 결합자

1) (공백) 자손결합자

2) > 자식결합자

span {
  background-color: gray;
}

div > span {
  background-color: DodgerBlue;
}

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

결과화면을 보면 > 자식 선택자를 이용하여 div바로 아래의 span 태그 요소들만 색이 dodgerblue로 바뀐 것을 알 수 있다.

3) ~ 일반 형제 결합자

첫 번째 요소를 뒤따르면서 같은 부모 공유하는 두 번째 요소 선택

ex) p ~ span은 <p>요소를 뒤따르는 모든<span> 요소와 일치

4) + 인접 형제 결합자

 첫 번째 요소의 바로 뒤, 같은 부모 공유 공유하는 두 번째 요소 선택

input[type="text"]{
  &.error + .error-msg {
    color : red;
  }
}

<input type="text" class="error">
<p class="error-msg">에러 메시지</p>

input type이 text, 클래스명이 error일 경우, 바로 인접한 에러 메시지 색상을 red로 변경

 

4. 가상 클래스(의사 클래스) 선택자

선택한 요소가 특별한 상태일 경우에만 만족

 

:hover :focus :active(눌렀다가 떼기 직전) 등

:focus-visible 버튼을 눌렀다가 떼고 난 후 focus 빠짐 (IE에서는 불가) - cf. 웹접근성 키보드 포커스 처리

 

button:not(:disabled):hover disabled 상태가 아니면서 hover일 경우에만 적용 (사용자의 혼란을 막을 수 있음)

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

:nth-chlid(n) 특정 순서에 있는 요소 선택

:only-child 자식요소가 하나만 있을 경우에만 적용

 

5. 가상 요소 선택자

태그로 직접 입력하지 않고 가상 요소가 있다고 생각하고 이 영역에 대해 스타일링 하겠다는 느낌

가상 클래스 선택자와 다르게 :: 두 개를 붙여줘야 함

ul {
  display : flex;
  list-style : none;
}

li + li {
 	&::before {
    	content : '|';
        margin : 0px;
        color : #ddd;
 }
}

<ul>
	<li> 메뉴1 </li>
    <li> 메뉴2 </li>
    <li> 메뉴3 </li>
    <li> 메뉴4 </li>
    <li> 메뉴5 </li>
</ul>

구분선을 문자로 입력하지 않고, 커스터마이징을 따로 묶지 않고도 할 수 있는 장점이 있음

 

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors