CSS Selector

---

• 전체 Selector

  * 은 모든 요소를 선택한다.

* { }

• Type Selector

  주어진 tag 명을 가진 요소를 선택한다.

div { }

• Class Selector

  . 은 주어진 class 속성을 가진 모든 요소를 선택한다.

.classA { }

• ID Selector

  # 은 주어진 id 속성을 가진 요소를 선택한다.

#only { }

• Attribute Selector

  [] 은 주어진 attribute의 존재 여부나 값에 따라 요소를 선택한다.

div[id="only"] { }
a[href="https://example.org"] { }
img[src] { }

• Grouping Selector

  , 를 사용하여 복수개의 셀렉터를 연속하여 지정할 수 있다.

div, span, #main, .content { }

• 후손 Selector

  은 첫 번째 요소의 후손 중에 두 번째 요소와 일치하는 모든 요소를 선택한다.

header p { }

<header>
	<p> <!-- Selected -->
		<span>
			<p></p> <!-- Selected -->
		</span>
	</p>
	<p> <!-- Selected -->
		<span>
			<p></p> <!-- Selected -->
		</span>
	</p>
</header>

• 자식 Selector

  > 은 첫 번째 요소의 자식 중에 두 번째 요소와 일치하는 모든 요소를 선택한다.

header > p { }

<header>
	<p> <!-- Selected -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- Selected -->
		<span>
			<p></p>
		</span>
	</p>
</header>

• 일반 형제 Selector

  ~ 은 같은 부모를 공유하면서 첫 번째 요소 뒤에 오는 두 번째 요소를 모두 선택한다.

section ~ p { }

<header>
	<section></section>
	<p></p> <!-- Selected -->
	<p></p> <!-- Selected -->
	<p></p> <!-- Selected -->
</header>

• 인접 형제 Selector

  + 은 같은 부모를 공유하면서 첫 번재 요소 바로 뒤에 오는 두 번째 요소를 선택한다.

section + p { }

<header>
	<section></section>
	<p></p> <!-- Selected -->
	<p></p>
	<p></p>
</header>

• 가상 클래스 Selector

  요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. : 를 사용한다.
  여기서 특정 상태란 예를 들어 다음과 같다.

  • 마우스 포인터가 올라와 있을때
  • 링크를 방문했을때와 방문하지 않았을때
  • 포커스가 들어와있을때

div:hover { } /* div요소가 hover상태일때(마우스 포인터가 올라와 있을때) */
div:focus { } /* div요소가 focus상태일때(포커스가 들어와 있을때) */
a:link { } /* a요소가 link상태일때(방문하지 않은 링크일때) */
a:visited { } /* a요소가 visited상태일때(방문한 링크일때) */
a:active { } /* a요소가 active상태일때(활성화된(클릭된) 상태일때) */
input:checked + span { } /* input 요소가 checked상태일때(체크 상태일때) input요소 바로 뒤에 오는 span 요소를 선택*/
input:enabled { } /* input 요소가 enabled상태일때(사용 가능한 상태일때) */
input:disabled { } /* input 요소가 disabled상태일때(사용 불가능한 상태일때) */

div:first-child { } /* 셀렉터에 해당하는 요소 중 첫 번째 자식인 요소를 선택 */
div:last-child { } /* 셀렉터에 해당하는 요소 중 마지막 자식인 요소를 선택 */
div:nth-child(n) { } /* 셀렉터에 해당하는 요소 중 앞에서 n번째 자식인 요소를 선택 */
div:nth-last-child(n) { } /* 셀렉터에 해당하는 요소 중 뒤에서 n번째 자식인 요소를 선택 */

input:not([type=password]) { } /* input요소 중에서 type attribute의 값이 password가 아닌 요소를 선택*/

---

아래의 사이트들은 CSS Selector를 연습할 수 있는 곳이다.

CSS Diner
CSS Selector