CSS 선택자는 CSS 규칙을 적용할 요소를 정의
CSS는 요소들을 선택할 수 있는 다양한 선택자를 제공한다.
선택자는선택자(Selectors), 선언부(Decline)로 기본 구성이 이루어져 있다.
이번 포스팅에서는 선택자들의 종류에 대해서 알아보도록 하겠다.
selector {
property : value;
}
CSS Selectors Type Selector
는 HTML태그를 직접적으로 지칭하는 선택자다.
Type Selector
를 지칭할때는 해당 태그의 명칭만을 사용한다.
p {
color: #212529;
}
div {
background-color: #e0e0e0;
}
CSS Selectors Class Selector
는 HTML태그의 각각의 class속성값을 정하고 이를 지칭하는 선택자다.
Class Selector
를 지칭할때는 .해당 태그
를 사용
<!-- HTML문서 -->
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>
/* CSS문서 */
.lorem {
font-size: 32px;
}
Class Selector
는 중복사용 가능하다. 즉 각각의 Class Selector
는 동일한 스타일이 적용된다.
<!-- HTML문서 -->
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, temporibus.
</div>
/* CSS문서 */
.lorem {
font-size: 32px;
}
하나의 Class Selector
는 동시에 여러개를 가질 수 있다. 이는 띄어쓰기로 구분한다.
<div class="box1 box2 box3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, expedita?
</div>
CSS Selectors ID Selector
는 HTML태그의 ID속성값을 정하고 이를 지칭하는 선택자다.
ID Selector
는 HTML문서안에서 단 한개만 존재하며 ID Selector
를 지칭할때는 #해당 태그
를 사용한다.
<!-- HTML문서 -->
<div id="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, expedita?
</div>
/* CSS문서 */
#lorem {
font-size: 32px;
}
CSS Selectors Child, Descendant
& Sibling Combinators
는 HTML태그의 자식, 자손, 형제를 지칭하는 선택자다.
<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ul>
<li>
<h1>제목2</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, maiores.
</p>
</li>
</ul>
</section>
/* CSS문서 */
/* 제목1 스타일 적용 */
section > h1 {
color: #ff4949;
}
<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ul>
<li>
<h1>제목2</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, maiores.
</p>
</li>
</ul>
</section>
}
/* CSS문서 */
/* 제목1, 제목2 스타일 적용 */
section h1 {
color: #ff4949;
<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ol>
<li>요소1</li>
<li class="active">요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ol>
</section>
<!-- CSS코드 -->
/* "active"라는 클래스명 다음에 오는 모든 형제 <li>태그 요소에 스타일을 적용 */
/* -> 요소3, 4, 5에 스타일이 적용 */
.active ~ li {
color: #0066ff;
}
CSS Selectors Structural Pseudo-classes
는 HTML태그의 구조적 가상 클래스를 지칭하는 선택자다.
가상 클래스를 지칭하는 요소는 :child
, ::before
, ::after
가 있다.
element:first-child
: 첫번째 자식 요소 지칭<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ol>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ol>
</section>
<!-- CSS코드 -->
/* <li>태그에 첫번째 요소를 선택 */
/* -> 요소1에 스타일이 적용 */
li:first-child {
color: #ff4949;
}
element:last-child
: 마지막 자식 요소 지칭<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ol>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ol>
</section>
<!-- CSS코드 -->
/* <li>태그에 마지막 요소를 선택 */
/* -> 요소5에 스타일이 적용 */
li:last-child {
color: #ff4949;
}
element:nth-child(n)
: n번째 위치 자식 요소 지칭<!-- HTML코드 -->
<section>
<h1>제목1</h1>
<ol>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ol>
</section>
<!-- CSS코드 -->
/* <li>태그에 n번째위치 요소를 선택 */
/* -> 요소3에 스타일이 적용 */
li:nth-child(3) {
color: #ff4949;
}
CSS Selectors User Action Pseudo-classes
는 HTML태그의 동적 가상 클래스를 지칭하는 선택자다.
가상 클래스를 지칭하는 요소는 :hover
, :active
, :focus
가 있다.
element:hover
: <button>
과 같은 HTML 요소에 마우스 커서를 올리면 특정 상태로 변경하는 클래스<!-- HTML코드 -->
<a href="https://www.naver.com">
네이버로 이동
</a>
<!-- CSS코드 -->
/* 해당위치에 마우스 커서가 올라가면 지정한 색으로 배경색이 변경 */
a:hover {
background-color: #0066ff;
}
element:active
: <button>
과 같은 HTML 요소에 마우스 커서를 클릭하는 순간 특정 상태로 변경하는 클래스<!-- HTML코드 -->
<a href="https://www.naver.com">
네이버로 이동
</a>
<!-- CSS코드 -->
/* 해당위치를 마우스 커서로 클릭하는 순간 지정한 색으로 배경색이 변경 */
a:active {
background-color: #0066ff;
}
element:focus
: <button>
과 같은 HTML 요소에 마우스 커서를 클릭한 뒤 특정 상태로 변경하는 클래스<!-- HTML코드 -->
<input type="email" placeholder="Enter your email">
<!-- CSS코드 -->
/* 해당위치에 입력하기 위해 마우스 커서로 클릭하는 순간 지정한 색으로 테두리색이 변경 */
input:focus {
border-color: #0066ff;
}
기본적으로 CSS는 순차적으로 진행되기 때문에 마지막으로 적용된 스타일이 우선순위가 높다.
p {
color: #004455;
}
/* p태그에는 해당스타일이 적용 */
p {
color: #004466;
}
이외에 나머지 Selectors 우선순위를 가지고 있으며 중복된 Selector를 가지고 있을 때는 순위의 총합이 높은 순서로 적용된다.
ID선택자
Class, Pseudo-class선택자
Type선택자
CSS_Selectors - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지