[CSS] 선택자(Selector)란?

 

◽ 선택자(Selector)란?

스타일에서 중괄호({ })가 나오기 전의 부분 모두가 선택자이다. HTML 안의 특정한 element를 적어준다.

 

 

◽ 선택자(Selector)의 종류

- 전체 선택자(Universal Seletor): *

/* CSS */
* { background-color: black; }

 

- 태그 선택자(Type Selector): p, div, ul 등의 태그의 이름으로 작성

/* CSS */
p { background-color: black; }
div { background-color: black; }

 

- 클래스 선택자(Class Selector): 태그에 클래스를 직접 지정한 경우로 앞에 .을 붙여 작성

/* CSS */
.className { margin: 0; }

 

- ID 선택자: 태그에 id를 직접 지정한 경우로 앞에 #을 붙여 작성

/* CSS */
#idName { color: red; }

 

- 하위선택자

선택자 사이를 공백을 사용하여 나타낸다.

하위 선택자는 상위 선택자 아래의 모든 엘리먼트(=자손들)에 접근 할 수 있다.

#wrap .className {
	...
}

 

- 자식 선택자

선택자 사이를 '>'를 사용하여 나타낸다.

하위 선택자는 상위 선택자 바로 아래의 엘리먼트(=자식)에만 접근 할 수 있다.

#wrap > .className {
	...
}

 

- 인접 형제 선택자

선택자 사이를 '+'를 사용하여 나타낸다.

같은 레벨의 바로 뒤에 있는 엘리먼트 하나를 선택한다.

#wrap + .className {
	...
}

 

- 일반 형제 선택자

선택자 사이를 '~'를 사용하여 나타낸다.

같은 레벨의 바로 뒤에 있는 엘리먼트를 모두를 선택한다.

#wrap ~ .className {
	...
}

 

- 속성 선택자

/* class 속성이 있는 모든 h1 태그 */
h1[class] {
	color: red;
}

/* alt 속성이 있는 모든 img 태그 */
img[alt] {
	border: 1px solid black;
}

 

 

- 가상클래스 선택자: 모두 사용 시, 표의 순서대로 기재해야 한다.

속성	풀이
a:link	링크된 글자를 보고만 있을때의 스타일을 주는 선택자
a:visited	링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우의 스타일을 주는 선택자
a:hover	링크된 글자에 마우스를 올릴 때 스타일을 주는 선택자
a:active	클릭했다가 돌아왔거나 클릭하려나 만 경우에 스타일을 주는 선택자
a:focus	tab 키 등으로 포커스가 나타날 경우

 

- 수도 클래스 선택자

속성	풀이
:first-letter	요소의 첫 글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫번째 요소
:last-child	같은 요소 중 마지막 요소
:before	요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소
:after	요소의 맨 뒤에 배치하는 마크업에는 없는 가상 요소 (경험 상, clear: both;를 적용해야할 때 씀)

 

- 종속 선택자

/* 클래스명이 more인 p 태그 안에있는 a 태그의 색상을 변경한다. */
p.more a {
	color: red;
}

 

- 그룹 선택자: 선택자들을 쉼표로 구분하여 여럿을 기술한다.

h1, p {
	border: 1px solid #000;
}

 

 

---

 

 

참조 및 출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

CSS: 선택자(Selector) 이해

[css] css 선택자(selector) 의 종류와 예시

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.