지난번에 CSS 선택자와 그 종류에 대해 알아보았다.
이어서 오늘은 가상클래스 선택자와 가상 요소 선택자 그리고 속성 선택자에 대해 알아보자.
✅ 세번째로 가상 클래스 선택자에 대해 알아보자.
가상 클래스 선택자 종류에는 아래와 같이 있다.
- 사용자의 행동에 따라 변화 : hover,active,focus,visited
- 요소의 상황 : first-child, last-child, nth-child,...
- 부정 선택 : not
가상 클래스 선택자
1) :hover
선택자 x 요소에 마우스 커서가 올라가 있는 동안 선택한다.
<a href="https://www.naver.com">Naver</a>a:hover{
color: red;
}마우스 올리기 전
마우스 올린 후
가상 클래스 선택자
2) :active
선택자 x 요소에 마우스를 클릭하고 있는 동안 선택한다.
<a href="https://www.naver.com">Naver</a>a:active{
color: red;
}가상 클래스 선택자
3) :focus
선택자 x 요소가 포커스 되면 선택한다.
<input type="text"/>input:focus{
background-color: orange;
}포커스 전
포커스 후
가상 클래스 선택자
4) :first-child
선택자 x가 형제 요소 중 첫째라면 선택한다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits span:first-child{
color: red;
}
근데 여기서 아래와 같이 코드를 짜면 어떻게 될까?
.fruits div:first-child{
color: red;
}
결과는 div 태그는 형제 요소중 첫 번째가 아니기 때문에 실행 결과가 아무것도 나타나지 않는걸 알 수 있다.
가상 클래스 선택자
5) :last-child
선택자 x가 형제 요소 중 막내라면 선택한다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits h3:last-child{
color: red;
}
가상 클래스 선택자
6) :nth-child(n)
선택자 x가 형제 요소 중 (n)번째라면 선택한다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits *:nth-child(2){
color: red;
}
가상 클래스 선택자
7) :not(x)
선택자 x가 아닌 abc 요소 선택한다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits *:not(span){
color: red;
}
✅ 네번째로 가상 요소 선택자에 대해 알아보자.
가상 요소 선택자는 선택된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자이다.
(빈값 "" 이라도 넣어줘야 적용된다.)
가상 요소 선택자
1) :before
선택자 x 요소의 내부 앞에 내용(content)을 삽입한다.
<div class="box">여기요!</div>.box::before{
content: "택시~ ";
color: red;
}
가상 요소 선택자
2) :after
선택자 x 요소의 내부 뒤에 내용(content)을 삽입한다.
<div class="box">여기요!</div>.box::after{
content: " 빨리";
color: blue;
}
가상 요소 선택자는 HTML 문서의 특정 부분을 스타일링하기 위해 사용하고 실제로 HTML 문서에 존재하지 않는 부분이지만 CSS를 통해 스타일 적용이 가능하다.
참고) 가상클래스 : 와 가상요소 :: 차이
가상 클래스 - 문서의 기존 요소 상태를 나타낸다.
가상 요소 - 문서의 특정 부분을 생성하여 스타일링한다.
구분하기 위해서 가상클래스는 : 가상요소는 :: 로 구분한다.
✅ 다섯번째로 속성 선택자에 대해 알아보자.
속성 선택자는 지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자이다.
속성 선택자 종류
- 특정 속성만 지정
- 속성과 속성의 값을 지정
속성 선택자
1) [x]
속성 x를 포함한 요소를 선택한다.
<input type="text" value="ID"/>
<input type="password" value="1234"/>
<input type="text" value="ABCD" disabled/>[disabled]{
color: red;
}
속성 선택자
2) [x="abc"]
속성 x를 포함하고 값이 abc인 요소 선택한다.
<input type="text" value="ID"/>
<input type="password" value="1234"/>
<input type="text" value="ABCD" disabled/>[type="password"]{
color: red;
}
✅ 마지막으로 CSS 우선순위에 대해 알아보자.
CSS 우선순위는 아래와 같다.
!important > 인라인 스타일 > 아이디 선택자 >
클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자
여기까지 CSS 선택자의 종류에 대해 알아보았다. 코드를 짜다보면 동일한 요소를 다른 선택자로 적용해 여러 스타일이 적용되는 난감한 상황이 발생하기도 하는데 그때 CSS 우선순위를 알고 있으면 아마 도움이 되지 않을까 싶다. 😊
