[css] 선택자 필터
CSS 선택자 필터는 웹 개발에서 특정 요소를 선택하는 데 사용됩니다. 필터는 요소의 속성, 상태 또는 위치 등을 기반으로 선택자를 세부적으로 제어하는 데 유용합니다.
1. 속성 필터
/* 특정 속성을 가진 요소 선택 */
element[attribute]
/* 특정 속성의 값을 정확히 일치하는 요소 선택 */
element[attribute=value]
/* 특정 속성의 값이 특정 문자열을 포함하는 요소 선택 */
element[attribute*=value]
2. 상태 필터
/* hover 상태의 요소 선택 */
element:hover
/* 클릭된 상태의 요소 선택 */
element:active
/* 포커스된 상태의 요소 선택 */
element:focus
3. 위치 필터
/* 첫 번째 요소 선택 */
element:first-of-type
/* 마지막 요소 선택 */
element:last-of-type
/* 짝수 번째 요소 선택 */
element:nth-of-type(even)
/* 홀수 번째 요소 선택 */
element:nth-of-type(odd)
이러한 필터를 사용하여 CSS 선택자를 더 구체적이고 다양한 상황에 맞게 조정할 수 있습니다. 이를 통해 웹 페이지의 디자인과 상호작용을 더욱 다채롭게 표현할 수 있습니다.
참고 문헌: