본문으로 건너뛰기
실습하기

선택자(Selector) - 고급

앞서 소개한 선택자는 CSS를 적용하기 위한 가장 기본적인 선택자입니다.

이번에는 선택자를 결합해 보다 더 복잡한 선택자를 구성해 보겠습니다.


그룹화 선택자​

그룹화 선택자는 여러 선택자를 결합하여 더 복잡한 선택자를 만들 수 있습니다.

콤마(,)를 선택해 두 개 이상의 선택자를 그룹화 합니다.

예를 들어 p, h1은 모든 p 요소와 모든 h1 요소를 선택합니다.

CSS
/* 그룹화 선택자를 사용하여 p와 h1 요소에 동일한 스타일 적용 */
p,
h1 {
  color: blue; /* 글자 색상을 파란색으로 설정 */
}

결합자​

결합자는 선택자를 결합하여 더 복잡한 선택자를 만들 수 있습니다.


인접 형제 결합자 (+)​

선택자의 바로 다음 형제를 선택합니다.

예를 들어 p + h1은 모든 p 요소의 다음 형제인 모든 h1 요소를 선택합니다.


일반 형제 결합자 (~)​

선택자의 형제 중 하나를 선택합니다.

예를 들어 p ~ h1은 모든 p 요소의 형제 중 하나인 모든 h1 요소를 선택합니다.

CSS
/* 인접 형제 결합자를 사용하여 p 요소 바로 뒤에 오는 h1 요소에 스타일 적용 */
p + h1 {
  color: red; /* 글자 색상을 빨간색으로 설정 */
}

/* 일반 형제 결합자를 사용하여 p 요소 뒤에 오는 모든 h1 요소에 스타일 적용 */
p ~ h1 {
  border-bottom: 2px solid black; /* 아래쪽에 2px 두께의 검은색 테두리 추가 */
}

의사 선택자​

의사 선택자는 특정 조건을 충족하는 요소를 선택합니다.

  • 형태 의사 선택자 : 요소의 형식을 지정합니다. 예를 들어 :empty는 비어 있는 요소를 선택합니다.

  • 상태 의사 선택자 : 요소의 상태를 지정합니다. 예를 들어 :hover는 마우스가 요소 위에 있을 때 스타일을 지정합니다.

  • 관계 의사 선택자 : 요소의 관계를 지정합니다. 예를 들어 :nth-child()는 몇 번째 자식인지를 지정합니다.

CSS
/* 형태 의사 선택자를 사용하여 비어 있는 요소에 스타일 적용 */
:empty {
  background-color: lightgray; /* 배경색을 연한 회색으로 설정 */
}

/* 상태 의사 선택자를 사용하여 마우스가 요소 위에 있을 때 스타일 적용 */
a:hover {
  text-decoration: underline; /* 밑줄 추가 */
  color: orange; /* 글자 색상을 주황색으로 설정 */
}

/* 관계 의사 선택자를 사용하여 ul의 세 번째 자식 요소에 스타일 적용 */
ul:nth-child(3) {
  font-weight: bold; /* 글꼴을 굵게 설정 */
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!