다양한 선택자 조합 방법

 

 

 

---

 

다양한 선택자를 어떻게 조합해서 사용할 수 있을까?

 

 

---

 

 

 

 

선택자 조합의 기본

 

--

선택자는 "태그명", "클래스", "id", "속성" 등을 조합해서 사용할 수 있다.

조합 방법에 따라 정확한 요소 선택이 가능하며, 스타일 적용 범위도 더 정밀하게 설정할 수 있게 된다.

 

• 태그  :  태그명
• 클래스  :  .클래스명
• id   :  #아이디명
• 속성  :  [속성명] 또는 [속성명="값"]

--

 

 

 

 

문법적 허용 조합 선택자  ( 구분자 : 없음 )

 

--

별도의 구분자 없이 바로 이어서 "태그", "클래스", "id", "속성"을 결합하여 중첩된 조건의 선택자를 사용할 수 있다.

 

기본 형식

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

 

예시 코드

div.box { /* CSS 코드 */ }

div태그이면서 class 속성 값이 "box"인 태그

 

section#main { /* CSS 코드 */ }

main 태그이면서 id 속성 값이 "section"인 태그

 

.button[type="submit"] { /* CSS 코드 */ }

class 속성 값이 "button"이면서 type="submit" 속성을 가진 요소

--

 

 

 

 

하위 선택자 조합  ( 구분자 : 공백 )

 

--

부모 요소 내부의 모든 자식 요소 중 특정 태그를 선택자로 지정한다.

 

기본 형식

부모요소 하위요소1 하위요소2 ... { /* CSS 코드 */ }

부모요소의 하위요소1의 모든 하위요소2를 선택자로 지정

 

예시 코드

<style>
  div .box {
    color: red;
  }
</style>

<!-- 생략 -->

<div>
   <p class="box">빨간색</p>  <!-- div 내부의 자손 -->
   <span>
      <p class="box">빨간색</p>  <!-- div 내부 깊은 자손 -->
   </span>
</div>
<p class="box">검은색</p>  <!-- div 밖에 있으므로 적용 안 됨 -->

--

 

 

 

 

자식 선택자  ( 구분자 : > )

 

--

부모요소의 직접적인 특정 자식요소만 선택자로 지정한다.

 

기본 형식

부모요소 > 자식요소1 > 자식요소2 > ... { /* CSS 코드 */ }

부모요소의 바로(직계) 자식요소1의 바로(직계) 자식요소2를 모두 선택자로 지정

 

예시 코드

<style>
  ul > li {
    color: red;
  }
</style>

<!-- 생략 -->

<ul>
   <li>내용 1</li>   <!-- ul의 직접 자식 -->
   <ul>
      <li>내용 2</li>   <!-- ul의 직접 자식 -->
      <div>
         <li>내용 3</li>   <!-- ul의 자손이지만, 직계 자식이 아님 -->
      </div>
   </ul>
</ul>

--

 

 

 

 

인접 형제 선택자  ( 구분자 : + )

 

--

바로 다음에 작성된 요소를 선택자로 지정한다.

 

기본 형식

요소1 + 요소2 + 요소3 + ... { /* CSS 코드 */ }

요소1 바로 다음에 위치한 요소2 바로 다음에 위치한 요소3을 선택자로 지정한다.

 

예시 코드

<style>
   h2 + p + h3 {
   color: green;
   }
</style>

<!-- 생략 -->

<h2>제목2</h2>
<p>내용</p>
<h3>제목3</h3>   <!-- h2 바로 다음에 작성된 p(형제)의 바로 다음에 작성된 h3(형제)로 적용(초록색) -->
<h3>제목3</h3>   <!-- 바로 앞에 p가 없으므로 적용 안됨 (검정) -->
<span>span</span>
<p>내용</p>
<h3>제목3</h3>   <!-- p의 바로 다음에 h3가 작성되어있지만 p가 h2 바로 다음에 작성되지 않아서 적용 안됨 (검정) -->
<h2>제목2</h2>
<span>span</span>
<p>내용</p>
<h3>제목3</h3>   <!-- p의 바로 다음에 h3가 작성되어있지만 p가 h2 바로 다음에 작성되지 않아서 적용 안됨 (검정)-->

--

 

 

 

 

일반 형제 선택자  ( 구분자 : ~ )

 

--

뒤에 나오는 모든 특정 요소를 선택자로 지정한다.

 

기본 형식

요소1 ~ 요소2 ~ 요소3 ~ ... { /* CSS 코드 */ }

요소1 뒤에 나오는 모든 요소2 뒤에 나오는 모든 요소3을 선택자로 지정한다.

 

예시 코드

<style>
   h2 ~ p ~ h3 {
   color: green;
   }
</style>

<!-- 생략 -->

<h2>제목2</h2>
<p>내용</p>
<h3>제목3</h3>   <!-- h2 뒤에 작성된 p(형제)의 뒤에 작성된 h3(형제)로 적용(초록색) -->
<h3>제목3</h3>   <!-- h2 뒤에 작성된 p(형제)의 뒤에 작성된 h3(형제)로 적용(초록색) -->
<span>span</span>
<p>내용</p>
<h3>제목3</h3>   <!-- h2 뒤에 작성된 p(형제)의 뒤에 작성된 h3(형제)로 적용(초록색) -->
<h2>제목2</h2>
<span>span</span>
<p>내용</p>
<h3>제목3</h3>   <!-- h2 뒤에 작성된 p(형제)의 뒤에 작성된 h3(형제)로 적용(초록색) -->

--

 

 

 

 

그룹 선택자  ( 구분자 : , )

 

--

여러 요소 모두 선택자로 지정한다.

 

기본 형식

요소1, 요소2, 요소3, ... { /* CSS 코드 */ }

모든 요소1, 요소2, 요소3을 선택자로 지정한다.

 

예시 코드

<style>
   h1, #main-title, .highlight {
      color: blue;
      font-weight: bold;
   }
</style>

<!-- 생략 -->

<h1 id="main-title">제목</h1>       <!-- 적용 -->
<p class="highlight">내용 1</p>     <!-- 적용 -->
<p>내용 2</p>     <!-- 미적용 -->

--

 

 

 

 

속성 선택자 ( 구분자 : [] )

 

--

특정 속성과 일치하는 모든 요소를 선택자로 지정한다.

 

기본 형식

[속성1] { /* CSS 코드 */ }

속성1을 가진 모든 요소를 선택자로 지정한다.

 

속성 표현 종류

• [속성명]   :   해당 속성이 존재하는 요소 (값은 신경X)
• [속성명="값"]   :   해당 속성의 값이 일치하는 요소
• [속성명="값"]*   :   해당 속성의 값이 지정한 값이 포함되는 요소
• [속성명~="값"]   :   해당 속성의 값이 공백으로 구분된 단어 중 하나와 일치하는 요소
• [속성명|="값"]   :   해당 속성의 값이 하이픈(-)으로 구분된 단어에서 앞부분이 일치하는 요소
• [속성명^="값"]   :   해당 속성의 값이 지정한 값으로 시작하는 요소
• [속성명$="값"]   :   해당 속성의 값이 지정한 값으로 끝나는 요소

--

 

 

 

 

조합

 

--

위에 정리한 모든 선택자를 조합하여 사용도 가능하다.

(가상 요소/클래스 선택자도 조합 가능)

 

예시 코드

/* 그룹 선택자 + 속성 선택자 */
.box[data-status="active"],
.box[data-status="inactive"] {
  border: 1px solid black;
}

/* 자식 선택자 + 속성 선택자 */
.box[data-status="active"] > h2 {
  color: blue;
}

/* 일반 형제 선택자 + 속성 선택자 */
h2 + p[data-status="active"] {
  font-weight: bold;
}

/* 인접 형제 선택자 + 클래스 선택자 */
h2 + p.red {
  color: red;
}

/* 부모 > 자식 > 자식 + 속성 선택자 + 태그 */
#main > .box[data-status="active"] > span {
  text-decoration: underline;
}

/* 그룹 선택자 + 인접 형제 선택자 */
h2 + p, h2 + span {
  background-color: yellow;
}

div:hover button{ /* CSS 코드 */ }  
/* div 태그에 마우스를 올린 상태일 때, 해당 div 태그 하위에 있는 button 태그 선택 */

div:hover > button{ /* CSS 코드 */ } 
/* div 태그에 마우스를 올린 상태일 때, 해당 div 태그와 자식 관계에 있는 button태그 선택 */

--