CSS 선택자(Selector)란 CSS 규칙을 적용할 요소를 정의합니다.
프론트엔드 개발을 하다보면 공통된 스타일 요소를 적용하고 싶을 때 어떤 CSS 선택자를 사용할 수 있는지, 다른 개발자가 구현한 화면을 보고 어떻게 스타일을 적용해서 구현했는지 검사도구로 확인 해 볼 때 :before, :after등 들어보지 못한 CSS 선택자 종류를 접하게 됩니다.
또한 한 프로젝트를 협업하다보면 A와 B가 서로 다른 세부 페이지 화면을 개발하고 통합하려는데 CSS 선택자값이 겹쳐서 적용 우선순위에 따라 CSS가 충돌이 일어나는 경우도 있을겁니다.
이런 경우 CSS 선택자 종류와 적용 우선순위에 대한 이해도가 있다면 충돌 문제를 쉽게 해결할 수 있을 것입니다.
따라서 해당 글에서는 CSS를 적용하는 CSS 선택자 종류와 CSS 값의 적용 우선 순위에 대해 살펴보겠습니다.
먼저 CSS 문법(규칙)은 선택자 { 속성1: 속성값1; 속성2: 속성값2; } 와 같이 작성합니다.
CSS 선택자 종류
기본 선택자(basic selector)
- 전체 셀렉터: *
모든 요소를 선택합니다.
/* 전체 셀렉터 */
/* css */
* { color: blue; }
<!-- 전체 셀렉터 -->
<!-- html -->
<p>전체 셀렉터 * { color: blue; }</p>
<span>전체 셀렉터 * { color: blue; }</span>
<div>전체 셀렉터 * { color: blue; }</div>- 요소형 셀렉터(타입 셀렉터): tagName
주어진 노드 이름을 가진 모든 요소를 선택합니다.
/* css */
p { color: red; }
<!-- html -->
<p>기본 셀렉터 p { color: red; }</p>- 클래스 셀렉터: .className
주어진 class 특성을 가진 모든 요소를 선택합니다.
/* 클래스 셀렉터 */
/* css */
.color-yellow { color: yellow; }
<!-- 클래스 셀렉터 -->
<!-- html -->
<p class="color-yellow">전체 셀렉터 * { color: yellow; }</p>
<span class="color-yellow">전체 셀렉터 * { color: yellow; }</span>
<div class="color-yellow">전체 셀렉터 * { color: yellow; }</div>- ID 셀렉터: #idName
ID 이름과 동일한 요소를 선택합니다.
/* ID 셀렉터 */
/* css */
#color-green { color: green; }
#color-blue { color: blue; }
#color-indigo { color: indigo; }
<!-- ID 셀렉터 -->
<!-- html -->
<p id="color-green">ID 셀렉터 #color-green { color: green; }</p>
<p id="color-blue">ID 셀렉터 #color-blue { color: blue; }</p>
<p id="color-indigo">ID 셀렉터 #color-indigo { color: indigo; }</p>- 속성 셀렉터: .className[attr="attrValue"]
클래스, 아이디, 태그와 일치하는 요소의 속성값이 일치하는 요소를 선택합니다.
/* 속성 선택자 */
/* css */
a[href="https://developer.mozilla.org/"] { color: violet; }
a[href="https://naver.com/"] { color: black; }
<!-- 속성 선택자 -->
<!-- html -->
<a href="https://developer.mozilla.org/">MDN Web Docs - Mozilla</a>
<a href="https://naver.com/">Naver</a>
- 의사 클래스
- 그룹 선택자: .classNameA, .classNameB, .classNameC
/* 그룹 선택자 */
/* css */
.a, .b, .c { background-color: red; color: white}
<!-- 그룹 선택자 -->
<!-- html -->
<p class="a">.a, .b, .c { background-color: red; } - p tag</p>
<div class="a">.a, .b, .c { background-color: red; } - div tag</div>
<span class="a">.a, .b, .c { background-color: red; } - span tag</span>
의사 요소(pseudo-element)
결합자(Combinator)
- 자손 결합자: .classNameA .classNameB
A 보다 낮은 계층의 모든 B 요소를 선택합니다.
/* 자손 결합자 */
/* css */
.first-div span{ color: red; }
<!-- 자손 결합자 -->
<!-- html -->
<div class="first-div">
<span class="first-span">first-span</span>
<div class="second-div">
<span class="second-span">second-span</span>
<div class="third-div">
<span class="third-span">third-span</span>
</div>
</div>
</div>
- 자식 결합자: .classNameA > .classNameB
A 보다 한 계층 낮은 B 요소만 선택합니다.
/* 자식 결합자 */
/* css */
.first-div > span{ color: red; }
<!-- 자식 결합자 -->
<!-- html -->
<div class="first-div">
<span class="first-span">first-span</span>
<div class="second-div">
<span class="second-span">second-span</span>
<div class="third-div">
<span class="third-span">third-span</span>
</div>
</div>
</div>
- 일반 형제 결합자: .classNameA ~ .classNameB
A와 같은 계층에 존재하며 A를 제외한 다음부터 일치하는 모든 B 요소를 선택합니다.
/* 일반 형제 결합자 */
/* css */
.first-span ~ span{ color: red; }
<!-- 일반, 인접 형제 결합자 -->
<!-- html -->
<div class="first-div">
<span class="first-span">first-span</span>
<span class="second-span">second-span</span>
<span class="third-span">third-span</span>
</div>
- 인접 형제 결합자: .classNameA + .classNameB
A와 같은 계층에 존재하며 A를 제외하고 다음으로 처음 B와 일치하는 요소를 선택합니다.
/* 일반 형제 결합자 */
/* css */
.first-span + span{ color: red; }
<!-- 일반, 인접 형제 결합자 -->
<!-- html -->
<div class="first-div">
<span class="first-span">first-span</span>
<span class="second-span">second-span</span>
<span class="third-span">third-span</span>
</div>
