[CSS] CSS 선택자(selector)

CSS 선택자(selector)

선택자(selector)란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.

 

---

선택자의 종류

선택자의 종류는 타입 선택자, 아이디 선택자, 클래스 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상 클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 가있습니다. 

 

타입 선택자

p{
	color: red;
}

 

HTML의 태그 이름을 선택자로 사용할 수 있습니다.

 

아이디 선택자

#red {
	color: red;
}

HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id를 주어서는 안됩니다.

CSS에서는 id선택자 앞에 '#'을 붙여야 합니다. id명은 숫자로 시작할 수 없으며,  주로 영문자로 시작합니다.

 

클래스 선택자

.red {
	color: red;
}

.bold {
	font-weight: bold;
}

<p class="red">class 선택자</p>
<p class="red bold">class 선택자</p>

같은 이름만 갖는 요소만 모아 따로 속성을 부여할 수 있습니다.

여러 개의 요소에 같은 class명을 부여할 수 있고, 하나의 요소에 여러 개의 class명을 부여 할 수도 있습니다.

CSS에서는 class 선택자 앞에 '.'를 붙여야 합니다.

 

전체 선택자

* {
	color: red;
}

페이지의 모든 요소를 가리키는 선택자로 '*'로 표시합니다.

id, class명 상관없이 속성을 부여할 수 있습니다.

불필요하게 전체 선택자를 사용하는 것은 속도 저하의 원인이 되므로 반듯이 필요한 경우가 아니면 선택자를 명시하는 것이 좋습니다.

 

하위 선택자

.red p {
	color: red;
}

내부에 있는 모든 해당 요소를 가리킵니다.

 

자식 선택자

.red > p {
	color: red;
}

부모 자식관계이기에 하위요소의 하위요소는 가리키지 않습니다.

CSS에서는 선택자 사이를 >로 분리합니다.

 

인접 선택자

h2 + p {
	color: red;
}

현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자 입니다.

CSS에서는 선택자 사이를 '+'로 분리합니다.

 

형제 선택자

h2 ~ p {
	color: red;
}

<h2>형제 선택자</h2>
<p>형제 선택자</p>

현재 요소와 같은 계층에 있는 요소만을 선택할 수 있습니다.

 

그룹 선택자

h2, p {
	color: red;
}

여러 선택자들을 묶어 속성을 부여합니다.

CSS에서는 선택자 사이를 ','로 분리합니다.

 

속성 선택자

속성 값	설명
h1[class]	class명을 가진 h1요소
img[alt]	alt 속성을 가진 img 요소
p[class="abc"]	class명이 유일하게 'abc'인 p요소

속성명	설명
p[class~="abc"]	class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소
p[class|="abc"]	class명이 'abc' 이거나 'abc-' 로 시작하는 p 요소
p[class^="abc"]	class명이 철자 'abc'로 시작하는 p 요소
p[class$="abc"]	class명이 철자 'abc'로 끝나는 p요소
p[class*="abc"]	class명에 철자 'abc'가 포함되어 있는 p요소
a[href^="mailto"]	href 속성값이 'mailto'로 시작하 a요소

 

가상 클래스 선택자

a:link	링크가 걸린 문자에 속성을 부여하는 선택자
a:visited	링크를 클릭하여 해당 페이지에 다녀온 경우의 속성을 부여하는 선택자
a:hover	링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자
a:active	링크 걸린 글자가 활성화 되었을 경우의  속성을 부여하는 선택자
a:focus	링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자

 

가상 요소 선택자

:first- letter	요소의 첫글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫 번째 요소
:last-child	같은 요소 중 마지막 요소
:nth-child(n)	같은 요소 중 n번째 요소
:before	요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
:after	요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)

 

종속 선택자

<p id="abc">종속선택자</p>

type 선택자와 id 선택자, class 선택자가 결합된 형태입니다.

마크업이 위와 같을때 "#abc"와 "p#abc"는 같은 종속 선택자 지만 우선 순위는 "p#abc"가 더 높습니다.

 

---

정리!

CSS 선택자 종류에 대해서 알아보았습니다.

다음 선택자 우선순위 주제를 가지고 돌아오겠습니다. 개굴!

---

참고 사이트!

https://iridescent-zeal.tistory.com/81

[CSS] 선택자 종류 살펴보기: 기본, 복합, 가상클래스, 가상요소, 속성

https://coding23213.tistory.com/15

CSS의 선택자(selector) 종류 14가지