선택자의 종류
1. 전체 선택자
2. 타입 선택자
3. 속성 선택자
4. 가상 클래스 선택자
5. 가상 요소 선택자
가상 클래스 선택자
가상 클래스 선택자란, 태그 뒤에 추가적인 조건을 붙이고,
해당 조건을 만족하는 대상에 대한 선택자입니다.
:가상이벤트 로 가상 클래스 선택자를 지정할 수 있습니다.
가상 이벤트의 종류
1. 동적 가상이벤트
사용자의 동작에 따라 스타일링을 적용해주는 선택자입니다.
- link & visited
하이퍼링크에 적용할 수 있는 선택자입니다.
한번도 누르지 않았을 경우 :link 가상클래스 선택자로,
한번이라도 눌렀을 경우 :visited 가상클래스 선택자가 적용됩니다. - hover & active & focus
마우스와 상호작용하는 선택자입니다.
마우스를 올리면 hover 선택자가,
태그를 누르는 동안 active 선택자가,
인터랙션을 수행하고 있을때는 focus 선택자가 적용됩니다. - enabled & disabled
태그를 활성화/비활성화 된 상태에서 스타일을 적용합니다.
disabled 속성의 존재 유무가 기준이 되며,
disabled 속성이 없을 경우 enabled 선택자가
disabled 속성이 있을 경우 disabled 선택자가 적용됩니다. - checked
체크박스에서 사용되는 선택자입니다.
말 그대로 체크가 되어있을 경우 스타일이 적용됩니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.item-block{
background-color: black;
color: white;
overflow: hidden;
}
#hovering-block{
width: 60%;
height: 100px;
font-size: 1rem;
font-weight: bolder;
text-align: center;
line-height: 120px;
transition: 1s all;
}
#hovering-block:hover{
width: 40%;
height: 200px;
font-size: 15px;
line-height: 100px;
background-color: yellow;
color: black;
}
#hovering-block:active{
width: 60%;
height: 200px;
background-color: pink;
color: black;
}
#change-block{
width: 80%;
height: 100px;
text-align: center;
font-size: 15ps;
font-weight: bolder;
margin-top: 20px;
transition: 1s all;
}
#change-block:active{
border: 3px solid blue;
width: 300px;
}
#change-block:focus{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<div
style="
height: 100%;
margin: 0 auto;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;"
>
<div class="item-block" id="hovering-block">
<p>마우스를 올리면 변화합니다</p>
<span style="color: black;">블록을 눌러도 변화합니다</span>
</div>
<input
class="item-block"
id="change-block"
type="text"
value="클릭하면 변화합니다. 누르고있어도 변화합니다"/>
</div>
</body>
</html>모바일에서는 :hover가 적용되지 않으므로, PC에서 보시는 것을 추천합니다.
마우스를 올리면 변화합니다
블록을 눌러도 변화합니다
2. 요소 관련 가상클래스
존재하는 형제요소의 순서에 따라 적용하는 선택자입니다.
지정한 태그의 n번째 자식요소에 적용하는 방식으로 사용합니다.
- first-child & last-child & nth-child()
모든 형제요소를 기준으로 순서를 지정하는 선택자입니다.
첫번째 형제요소를 대상으로 할때는 first-child를,
마지막 형제요소를 대상으로 할때는 last-child를,
원하는 형제요소를 지정할때는 nth-child() 를 사용합니다.
nth-child 의 경우 2n-1 이나 even, odd 처럼 수식을 사용하여 여러 요소를 대상으로 할 수도 있습니다. - first-of-type & last-of-type & nth-of-type()
같은 형제요소를 기준으로 순서를 지정하는 선택자입니다.
child 요소와 사용방법은 비슷하지만, 같은 형제요소만을 기준으로 삼는다는 점에서 차이점이 있습니다.
- child 가상클래스와 of-type 가상클래스의 차이점
child 가상클래스는 모든 형제요소를 기준으로 n 번째 요소가 해당 태그일 경우 스타일을 적용합니다.
반면, of-type 선택자는 지정한 태그중 n번째 형제요소가 존재할 경우 스타일을 적용합니다.
예를 들면 li 태그를 대상으로 하는 스타일이 존재할때,
형제요소가 순서대로 div, li, a, li, p 일 경우
first-child를 지정한다면 맨 처음 태그가 div이므로 스타일이 적용되지 않지만,
first-of-type을 사용한다면 li 태그가 전체 요소중에서는 두번째이지만,
li 태그중에서는 첫번째 형제요소이므로 두번째 li 에 적용이 된다는 것 입니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.item-list{
font-size: 12px;
font-weight: bold;
color: black;
}
.unorder-list{
border: 2px solid black;
}
li.child-list:first-child{
color: blue;
font-weight: bolder;
}
li.type-of-list:first-of-type{
color: blue;
font-weight: bolder;
}
li.child-list:last-child{
color: yellow;
background-color: gray;
font-weight: bolder;
}
li.type-of-list:last-of-type{
color: yellow;
background-color: gray;
font-weight: bolder;
}
li.child-list:nth-child(3){
color: green;
background-color: red;
font-weight: bolder;
}
li.type-of-list:nth-of-type(3){
color: green;
background-color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<h2>실행결과</h2>
<ul class="unorder-list"> child 생성자
<div class="item-list child-list">div</div>
<li class="item-list child-list">li 1</li>
<p class="item-list child-list">p</p>
<li class="item-list child-list">li 2</li>
<span class="item-list child-list">span</a>
<p class="item-list child-list">p 2</p>
<li class="item-list child-list">li 3</li>
<li class="item-list child-list">li 4</li>
<p class="item-list child-list">p 3</p>
</ul>
<ul class="unorder-list"> of-type 생성자
<div class="item-list type-of-list">div</div>
<li class="item-list type-of-list">li 1</li>
<p class="item-list type-of-list">p</p>
<li class="item-list type-of-list">li 2</li>
<span class="item-list type-of-list">span</a>
<p class="item-list type-of-list">p 2</p>
<li class="item-list type-of-list">li 3</li>
<li class="item-list type-of-list">li 4</li>
<p class="item-list type-of-list">p 3</p>
</ul>
</body>
</html>
실행결과
- child 생성자
- li 1
- li 2 span
- li 3
- li 4
div
p
p 2
p 3
- of-type 생성자
- li 1
- li 2 span
- li 3
- li 4
div
p
p 2
p 3
child 선택자에서는 형제 요소의 순서를 먼저 확인하고, 그 뒤에 태그를 확인합니다.
따라서 첫번째 형제요소(div), 세번째 형제요소(p) 마지막 형제요소(p3) 모두 li가 아니기 때문에
스타일이 적용되지 않습니다.
반면, of-type 선택자는 먼저 태그를 확인하고, 그 중에서 순서를 확인합니다.
따라서 첫번째 li태그(2번째 형제요소), 세번째 li 태그(7번째 형제요소), 마지막 li태그(8번째 형제요소)에
각자 스타일이 적용됩니다.
3.가상클래스 not
not 가상클래스는 해당 태그 중 지정한 조건이 아닌 선택자에 스타일을 적용합니다.
몇개의 공통된 요소를 가진 태그를 제외하고 기본 스타일을 적용할 때 사용합니다.
조건의 종류는 클래스, 아이디명 부터 child, of-type 등 다양하게 설정할 수 있습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.unorder-list>li{
font-size: 18px;
font-weight: bold;
color: white;
}
.unorder-list{
border: 3px solid yellow;
background-color: black;
font-size: 24px;
color: gray;
}
li.item-list:not(#second-list){
font-size: 15px;
}
li.item-list:not(.list-odd){
color: yellow;
}
li.item-list:not(li:first-child){
font-weight: normal;
font-size: 12px;
}
</style>
</head>
<body>
<ul class="unorder-list"> 실행결과
<li class="item-list list-odd"> 리스트1 </li>
<li class="item-list" id="second-list"> 리스트2 </li>
<li class="item-list list-odd"> 리스트3 </li>
<li class="item-list"> 리스트4 </li>
<li class="item-list list-odd"> 리스트5 </li>
<li class="item-list"> 리스트6 </li>
<li class="item-list list-odd last-list"> 리스트7 </li>
<li>기본 설정값(비교용 디폴트값)</li>
</ul>
</body>
</html>
- 실행결과
- 리스트1
- 리스트2
- 리스트3
- 리스트4
- 리스트5
- 리스트6
- 리스트7
- 기본 설정값(비교용 디폴트값)
다음글엔 마지막, 가상 요소 선택자를 알아보겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 선택자 중첩 (0) | 2024.10.08 |
|---|---|
| css 알아보기 - 선택자 : 가상요소 선택자 (0) | 2024.10.07 |
| css 알아보기 - 선택자 : 속성과 속성선택자 (0) | 2024.10.02 |
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
| css 알아보기 - 스타일과 css (0) | 2024.09.30 |
