[ CSS ] CSS 고급 선택자

연결 선택자

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

하위 선택자

◻️  부모 요소에 포함된 하위 요소를 모두 선택한다.

◻️  즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.

section p { ... }

 

자식 선택자

◻️  하위 선택자와 다르게 자식 요소에만 스타일을 적용한다.

section > p { ... }

 

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

인접 형제 선택자

◻️  형제 요소 중에서 첫 번째 동생 요소만 선택한다.

h1 + p { coloir: blue; }

◻️  즉, 무수히 많은 p 중에서 첫 번쨰로 나오는 p만 적용한다.

형제 선택자

◻️  인접 형제 선택자와 달리 모든 형제 요소에 적용된다.

h1 ~ p { color: blue; }

 

속성 선택자

특정 속성이 있는 요소를 선택하는 [속성] 선택자

<style>
  a[href] {
    background: yellow;
  }
</style>

<ul>
  <li> <a>메인 메뉴 : </a></li>  <!-- 적용 안됨 -->
  <li> <a href="#">메뉴 1</a></li>
  <li> <a href="#">메뉴 2</a></li>
</ul>

 

특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자

/* <a target="_blank">인 요소 */
a[target = _black] { ... }

 

여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자

<style>
  [class ~= button] { ... } <!-- class 값 중에서 button이 있는 요소 -->
</style>
<ul>
  <li><a class="button">메뉴 1</a></li> <!-- 적용 -->
  <li><a class="flat button">메뉴 2</a></li> <!-- 적용 -->
  <li><a class="flat-button">메뉴 3</a></li> <!-- 적용 안됨 -->
</ul>

 

특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자

<style>
  <!-- class 값 중에서 button이 있거나 button-로 연결된 속성값이 있는 a 요소 -->
  a[class |= button] { ... }
</style>
<ul>
  <li><a class="button">메뉴 1</a></li> <!-- 적용 -->
  <li><a class="flat button">메뉴 2</a></li> <!-- 적용 -->
  <li><a class="button-flat">메뉴 3</a></li> <!-- 적용 -->
  <li><a class="flat-button">메뉴 4</a></li> <!-- 적용 안됨 -->
</ul>

 

특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]

a[title ^="eng"] { ... }
<li><a href="#" title="english">영어</a></li>

 

특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자

a[href $= hwp] {
  background: url(images/hwp_icon.gif) center right no-repeat;
}
<li><a href="intro.hwp">hwp 파일</a></li>

 

일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

a[href *= w3] { ... }
<li><a href="https://www.w3.org>미디어쿼리</a></li>

 

가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

💬  아래의 순서에 맞춰 스타일을 순서대로 정의해야 한다.

1️⃣ 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'

2️⃣ 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'

3️⃣ 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'

4️⃣ 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'

5️⃣ 웹 요소에 초점이 맞춰졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'

 

요소 상태에 따른 가상 클래스

앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'

◻️  같은 문서 안에서 다른 위치로 이동할 때에는 앵커를 이용한다.

#intro:target {
  background-color: #0069e0;
  color: #fff;
}

<li><a href="#intro">이용 안내</a></li>
<div id="intro" class="contents">
  ...
</div>

요소의 사용 여부에 따라 스타일을 적용하는 ':enable와 :disable 가상 클래스 선택자'

◻️  :enable 선택자 : 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정

◻️  :disable 선택자 : 사용할 수 없는 상태일 때 스타일을 지정

선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'

◻️  폼의 라디오 박스나 체크 박스처럼 checked 속성이 있는 요소의 스타일을 지정

<checked>
  #signup input:checked + label {
    color: red;
    font-weight: bold;
  }
</checked>
<ul>
  <li>
    <iput type="radio" name="room" id="basic">
    <label for="basic">HTML</label>
  </li>
</ul>

특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'

◻️  적용하고 싶지 않은 요소보다 적용하고 싶은 요소가 더 많을 때 사용하는 방법이다.

#signup input[type=text], input[type=tel] { ... }
/* == */
#signup input:not[type=radio] { ... }

 

구조 가상 클래스

특정 위치의 자식 요소 선택하기

◻️  요소가 여러 개 나열되어 있는 경우 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다.

종류	설명
:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
:nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택한다.
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.

<style>
  <!-- .contents의 세 번째 자식 요소에 스타일 적용 -->
  .contents :nth-child(3) { ... }  
  <!-- .contents의 p 요소 중에서 세 번째 자식 요소에 스타일 적용 -->
  .contents p:nth-of-type(3) { ... }
</style>

<div class="contents">
  <h2>A</h2>
  <p>B</p>
  <p>C</p> <!-- 상단 스타일 적용 -->
  <h2>AA</h2>
  <p>BB</p> <!-- 하단 스타일 적용 -->
  <p>CC</p>
</div>

수식을 사용해 위치 지정하기

◻️  위치가 계속 바뀔 때 반복된 규칙을 찾아내서 수식을 사용할 수도 있다.

/* div 요소에서 세 번째 자식인 p 요소에 스타일 적용 */
div p:nth-child(3)

/* div 요소에서 홀수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)

/* div 요소에서 짝수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(even), div p:nth-child(2n)

 

가상 요소

◻️  가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.

첫 번째 줄에 스타일을 적용하는 '::first-line 요소'

첫 번째 글자에 스타일을 적용하는 '::first-letter 요소'

내용 앞뒤에 콘텐츠를 추가하는 '::before 요소, ::after 요소'