가상클래스 선택자(pseudo-Classes Selectors)
말 그대로 가짜, 가상의 클래스 선택자를 의미한다.
가상 클래스 선택자는 앞에 콜론( : )이 붙는다. 콜론이 붙는다고 해서 모두 가상 클래스 선택자라고 볼수는 없지만
대체로 그렇다고 볼 수 있다.
콜론이 두개가 붙는 경우( :: )도 있는데 이 경우 가상요소 선택자라고 부른다.
HOVER
hover는 E에 마우스(포인터)가 올라가있는 동안에만 E를 선택한다. 흔히 마우스오버라고 부르는 것과 같다.
사용은 e:hover { } 형태로 사용한다.
<div class="box">
</div>
<!-- CSS -->
.box{
width: 100px;
height: 100px;
background-color: red;
transition: 0.4s;
}
.box:hover{
width: 200px;
background-color: yellowgreen;
}이렇게 작성하고 생성된 네모난 박스 모양 위에 마우스 포인터를 올리면 박스가 가로로 늘어나며 색이 변하는것을
확인할 수 있다.
transition 속성을 사용하는 경우도 있는데 transition: 0.4s 이런 형태로 사용하면 좀 더 부드럽게 변하는것을
확인할 수 있다. 시간을 의미하며 변하는 시간을 0.4초로 설정하는 것이다.
transition을 지우고 확인해보면 그냥 바로 바뀌는 것을 확인할 수 있다.
ACTIVE
active는 E를 마우스로 클릭하는 동안에만 E를 선택한다.
e:active { } 형태로 사용한다.
active의 경우도 transition을 사용해 좀 더 움직임을 줄 수 있으며 클릭한 상태에서만 변화가 생긴다.
마우스 버튼을 누르고 있을때만 변화가 생기고 손을 떼면 다시 돌아온다.
<div class="box">
</div>
<!-- CSS -->
.box {
width: 100px;
height: 100px;
background-color: red;
transition: 0.4s;
}
.box:active {
width: 200px;
background-color: yellowgreen;
}생성된 박스를 클릭하면 박스가 늘어나며 색이 변하는것을 확인할 수 있고 마우스 버튼에서 손을 떼면 다시
돌아오는것을 확인할 수 있다.
FOCUS
focus는 e가 포커스 된 동안에만 e를 선택한다.
포커스는 아무데나 사용가능한것이 아닌 대화형 콘텐츠에서 사용이 가능하다.
로그인이나 회원가입시에 입력하는 창을 클릭하여 커서를 이동시켜준 상태가 포커스 된 상태라고 볼 수 있다.
input, img, tabindex에서 사용이 가능하다.
input 태그를 만들어주고 focus로 설정을 잡아준다면 input에 포커스가 잡힐때마다 변경된다.
<input type="text">
<!-- CSS -->
input {
width: 100px;
outline: none;
border: 1px solid;
padding: 5px 10px;
transition: 0.4s;
}
.input:focus{
width:200px;
border-color: red;
}마우스로 input위치에 포커스를 잡게 되면 사이즈가 늘어나면서 테두리 색이 빨간색으로 변하는 것을 확인할수 있다.
hover, active, focus 처럼 사용자가 동작을 했을 때 변화되는 가상 클래스는 이 세가지가 전부라고 볼 수 있다.
이러한 이벤트 기능은 JavaScript가 더 효과적으로 사용할 수 있다.
선택자는 기본적으로 이벤트라는 개념과는 차이가 있는데 hover, active, focus는 그 중에서 이벤트와 비슷하다고
볼 수 있는 선택자들이다.
FIRST CHILD
first-child는 e가 형제 요소 중 첫번재 요소라면 선택한다.
E:first-child { } 형태로 사용한다.
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="ul2">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<!-- CSS -->
.ul1 li:first-child {
color: red;
}이렇게 작성하게 되면 제일 위에 있는 li태그인 1의 색이 빨갛게 변한다.
.ul1 li:first-child로 작성했기 때문에 클래스명이 ul1인 태그내에 있는 li태그에만 적용이 된다.
LAST CHILD
last-child는 first-child와 반대로 마지막 요소를 찾는다.
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="ul2">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<!-- CSS -->
.ul1 li:last-child {
color: red;
}이렇게 작성하게 되면 ul1 클래스인 ul태그 안에 있는 li태그들 중 가장 마지막에 있는 4만 빨갛게 변한다.
NTH CHILD
nth-child는 e가 형제요소중 n번째 요소라면 선택한다. n키워드를 사용하게 되면 시작은 0부터 해석한다.
e:nth-child(n) { } 형태로 사용된다.
<ul class="number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- CSS -->
.number li:nth-child(2) {
color: red;
}이렇게 작성하게 되면 2번째 li태그인 2가 빨갛게 변한다.
n이 0부터 시작하는 것이라고 했는데 배열처럼 첫번째 li가 0, 두번째 li가 1 이런 형태가 아니고
n이라는 키워드 자체가 0부터 시작이다.
<ul class="number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<!-- CSS -->
.number li:nth-child(2n) {
color: red;
}이렇게 작성하게 되면
이러한 결과를 볼 수 있다.
제일 먼저 2 * 0 = 0 이므로 0에 해당하는것이 없이 아무 요소에도 적용되지 않는다.
그리고 2 * 1 = 2 니까 두번째 li태그인 2에 적용이 되고 그 뒤로 쭉쭉 n이 증가해 4, 6, 8에 적용이 된다.
n을 사용하면 0부터 시작해서 계속 하나씩 증가해 나간다고 생각하면 될듯 하다.
<ul class="number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<!-- CSS -->
.number li:nth-child(n + 3) {
color: red;
}하나 더 보자면 n + 3은 0 + 3이 시작이므로 3번째 li부터 적용되기 시작해 n이 1씩 증가하면서
4, 5, 6, 7, 8, 9까지 모두 적용되게 되므로 다음과 같은 결과가 나온다.
데이터를 쭉 불러오는데 특정 번호 아래로 적용하고 싶으나 총 몇개가 될지 모른다는 가정하에 사용하기 좋을 것 같다.
nth-child에서의 유의사항은 요소가 일치해야 적용이 된다는 점이다.
<div class="number">
<div>1</div>
<p>2</p>
<p>3</p>
<span>4</span>
</div>
<!-- CSS -->
.number p:nth-child(1) {
color: red;
}이렇게 작성하게 되면 p태그중 첫번째인 2에 적용이 되지 않는다.
제일 첫 요소에 적용되는 것이기 때문에 div요소를 찾아가게되는데 p가 아닌 div이므로 적용이 되지 않게 된다.
만약 여러 태그가 섞여있는데 그 중에서 p태그에만 적용을 하고 싶다면
<div class="number">
<div>1</div>
<p>2</p>
<p>3</p>
<span>4</span>
<p>5</p>
<p>6</p>
</div>
<!-- CSS -->
.number p:nth-child(n + 1) {
color: red;
}이렇게 작성해주면 p태그에만 적용이 된다.
다른 주의사항으로는 first-child에도 같이 주의해야 하는 사항인데
<div class="number">
<div>1</div>
<div>2</div>
<div>3
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>
</div>
<!-- CSS -->
.number div:nth-child(1){
color: red;
}이렇게 작성하면 1에만 적용이 될것 같지만 3-1에도 적용이 된다.
nth-child(1) 이나 first-child나 첫번째 자식요소만을 선택하는 것이 아닌 같은 라인의 하위 요소 중 첫번째 요소 역시
선택하기 때문이다.
즉, number라는 클래스를 갖고있는 요소의 하위 요소인 1, 2, 3중에서 첫번째 요소인 1을 선택했는데
3이 하위요소들을 또 갖고 있는것을 확인하고 3-1, 3-2, 3-3 중에서 첫번째 요소를 또 선택한다는 것이다.
그래서 이러한 경우를 방지하기 위해 자식선택자인 >를 사용해야 한다.
자식선택자가 없는 경우는 계속 내려가며 체크하겠다는 의미이다.
<div class="number">
<div>1</div>
<div>2</div>
<div>3
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>
</div>
<!-- CSS -->
.number > div:nth-child(1){
color: red;
}
.number > div:first-child(1){
color: red;
}이렇게 변경해주게 되면 number의 바로 아래 하위요소중 첫번째인 1에만 적용이 된다.
만약 하위 요소들 중 단계와 상관없이 선택을 해야 하는 상황인데 태그가 다른 상황이라면 선택자를 없애야 한다.
<div class="number">
<div>1</div>
<div>2</div>
<div>3
<p>3-1</p>
<p>3-2</p>
<p>3-3</p>
</div>
</div>
<!-- CSS -->
.number div:nth-child(1){
color: red;
}이렇게 작성하게 되면 div태그인 1에만 적용이 되지만 3-1에도 적용이 되게 해야 한다면
<div class="number">
<div>1</div>
<div>2</div>
<div>3
<p>3-1</p>
<p>3-2</p>
<p>3-3</p>
</div>
</div>
<!-- CSS -->
.number :nth-child(1){
color: red;
}이렇게 작성해주면 된다.
그럼 태그가 다른 3의 하위요소인 p에도 적용이 된다.
NTH OF TYPE
nth-of-type은 e의 타입(태그이름)과 동일한 타입인 형제요소 중 e가 n번째 요소라면 선택한다.
이것 역시 n의 경우는 0부터 시작한다.
e:nth-of-type(n) { } 형태로 사용한다.
<div class="number">
<div>1</div>
<div>2</div>
<div>3</div>
<p>3-1</p>
<p>3-2</p>
<p>3-3</p>
</div>
<!-- CSS -->
.number p:nth-of-type(1){
color: red;
}이렇게 작성하게 되면 p가 number의 첫번째 하위요소가 아니더라도 p태그들중 첫번째 요소인 3-1을 찾아
적용하게 된다.
태그를 찾는 용도로만 사용되고 클래스로 찾는것은 불가능하다.
부정선택자(Negation selector)
부정선택자는 S가 아닌 E를 선택한다.
e:not(s) { } 이런 형태로 사용한다.
<div class="number">
<div class="a">1</div>
<li class="b">2</li>
<li class="c">3</li>
<li class="d">4</li>
<div class="e">5</div>
</div>
<!-- CSS -->
.number li:not(.b){
color: red;
}이렇게 작성하면 b라는 class를 갖고 있는 2를 제외한 나머지 li태그에 적용된다.
여기서도 역시 선택자를 제거하면 태그에 상관없이 전체 적용이 된다.
레퍼런스
패스트캠퍼스 올인원패키지 - CSS
'HTML&CSS' 카테고리의 다른 글
| CSS 선택자(Selector) (0) | 2021.04.08 |
|---|---|
| CSS란? (0) | 2021.04.07 |
| HTML(Hyper Text Markup Language) (0) | 2021.04.06 |
