너와 나의 개발 고리

[CSS] CSS 조합 선택자 사용 본문

CSS _HTML_JavaScript/CSS

[CSS] CSS 조합 선택자 사용

Oli-Viaaaa 2023. 7. 21. 15:22

2023.07.21 - [CSS _HTML_JavaScript/CSS] - [CSS] CSS 기본 선택자 사용

 

조합 선택자는 앞서 정리한 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자방법이다.

 

1. 그룹 선택자

그룹 선택자는 여러 선택자를 하나로 그룹 지을 때 사용한다. 선택자와 선택자는 , 기호로 구분한다.

형식)
	선택자1, 선택자2, 선택자3, ... , 선택자n{/* CSS 코드 */}
p{
    color:red;
}
#title{
    color:red;
}
.red{
    color:red;
}

 

 

위의 형식은 선택자는 다르지만 선언부는 똑같은 코드로 3개의 코드를 합치면 아래와 같다

p, #title, .red{
    color:red;
}

 

 

2. 자식 선택자

부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용한다. 

2개 이상의 선택자가 사용되며, 선택자와 선택자는 > 기호로 구분한다.

형식)
	부모 선택자 > 자식 선택자{/* CSS 코드 */}

 

 

3. 하위 선택자

선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법이다.

2개 이상의 선택자를 사용하고, 선택자와 선택자는 공백으로 구분한다

형식)
	선택자1 선택자2 선택자3 ... {/* CSS 코드 */}

 

아래의 코드는 div 태그의 하위에 있는 p 태그로 작성된 요소만 선택해 텍스트 색상을 빨간색으로 적용한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      div p{
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>lorem1</p>
      <ul>
        <li>
          <p>lorem2</p>
        </li>
        <li>
          <p>lorem3</p>
        </li>
      </ul>
    </div>
    <p>lorem4</p>
  </body>
</html>

 

 

4. 인접 형제 선택자

앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정한다.

2개 이상의 선택자를 사용하고, 선택자와 선택자는 +기호로 구분한다.

형식)
	이전 선택자 + 대상 선택자{/* CSS 코드 */}

 

예시 코드를 통해 확인해 볼 수 있다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      h1+h2{
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>lorem 1</h1>
    <h2>lorem 2</h2>
    <h2>lorem 3</h2>
  </body>
</html>

h1 코드와 인접한 형제 요소인 h2 태그를 선택자로 지정한다.

 

인접 형제 선택자 사용시 주의점으로는 인접 형태 사용자는 이전 요소 다음에 등장하는 형제 요소를 선택한다.

따라서 이전 요소보다 먼저 등장한 요소는 선택 대상이 아니다.

위의 코드로 예시를 들면 h1 태그와 인접한 h2 태그는 next로 이전 요소에 등장한 prev에는 해당사항이 없다 

 

 

5. 일반 형제 선택자

이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자 지정한다. 2개 이상의 선택자를 사용하며, 선택자와 선택자 ~ 기호로 구분한다

형식)
	이전 선택자 ~ 대상 선택자{/* CSS 코드 */}
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      h1~h2{
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>lorem 1</h1>
    <h2>lorem 2</h2>
    <h2>lorem 3</h2>
  </body>
</html>

위의 코드는 h1 태그의 형제 관계에 있는 모든 요소를 선택자로 지정한다.

 

결과를 보면 아래와 같다

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
[CSS] CSS 가상 요소 선택자 사용(::before, ::after)  (0) 2023.07.21
[CSS] CSS 기본 선택자 사용  (0) 2023.07.21
[CSS] CSS 적용하기  (0) 2023.07.20
[CSS] CSS 문법 살펴보기  (0) 2023.07.20
'CSS _HTML_JavaScript/CSS' Related Articles more