CSS(Cascading Style Sheets)는 HTML 요소를 효율적으로 스타일링하기 위한 스타일 시트 언어입니다. CSS 선택자는 스타일을 적용할 요소를 지정하는 데 사용됩니다. 선택자 파생은 CSS에서 중첩 및 자식 요소를 선택하기 위한 기능입니다.

기본 선택자

자식 선택자

자식 선택자는 특정 요소의 직접적인 자식 요소를 선택합니다. 이것은 부모 > 자식과 같은 형태로 표현됩니다.

예시:

nav > ul {
  /* nav 요소의 직접적인 자식인 ul 요소 선택 */
}

후손 선택자

후손 선택자는 특정 요소의 하위 요소를 선택합니다. 이것은 조상 공백 자손과 같은 형태로 표현됩니다.

예시:

article p {
  /* article 요소의 후손인 p 요소 선택 */
}

형제 선택자

형제 선택자는 같은 부모를 가지고 있는 요소 중에서 특정 요소를 선택합니다. 이것은 요소1 ~ 요소2와 같은 형태로 표현됩니다.

예시:

h2 ~ p {
  /* h2 요소 다음에 나오는 모든 p 요소 선택 */
}

속성 선택자

속성 값에 따른 선택자

속성 선택자를 사용하여 특정 속성 값을 가진 요소를 선택할 수 있습니다.

예시:

input[type="text"] {
  /* type이 "text"인 input 요소 선택 */
}

부분 일치 선택자

특정 속성 값에 부분적으로 일치하는 요소를 선택할 수 있습니다.

예시:

a[href^="https"] {
  /* href 속성 값이 "https"로 시작하는 모든 a 요소 선택 */
}

가상 선택자

가상 클래스 선택자

가상 클래스 선택자는 요소의 특정 상태나 조건을 선택합니다. 예를 들어, :hover, :active, :first-child 등이 있습니다.

예시:

a:hover {
  /* 마우스 호버 상태인 모든 a 요소 선택 */
}

가상 요소 선택자

가상 요소 선택자는 요소의 특정 부분을 선택합니다. 예를 들어, ::before, ::after 등이 있습니다.

예시:

p::before {
  /* 모든 p 요소의 내용 앞에 콘텐츠 추가 */
}

선택자 파생은 CSS를 효과적으로 활용하여 요소를 선택하고 스타일링하는 데 유용한 기능들을 제공합니다. 이를 활용하여 웹페이지의 디자인을 보다 다채롭게 표현할 수 있습니다.

참고 문헌:

• MDN Web Docs