CSS 필수 가상 클래스

1. hover

 

a태그 관련 알아둘 것 

1) href 속성을 비워두면 jQuery가 작동하지 않는다. -> #none을 넣어주자

2) body의 색상 속성을 적용받지 않는다.

 

선택자:hover 

위처럼 선택자 뒤에 가상클래스를 적어주면 되는데 선택자와 가상클래스 사이에 띄어쓰기가 있으면 안된다

 

<a href="#none">공지사항</a>
<a href="#none">Q&A</a>
<a href="#none">커뮤니티</a>

body {
    background-color: #fff;
    color: #333;
    font-size: 15px;
}
a {
    color: #333;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}
a:hover {
    color: dodgerblue;
    text-decoration: underline;
}

hover는 해당 선택자에 마우스 커서가 올라갔을 때 적용이 된다. 

a태그에 transition이라는 속성을 적용했는데 이는 변형이 될 때까지 걸리는 시간을 조정한다. 

위의 코드와 같이 hover가 되지 않은 상태에 적용을 하면 커서를 올리지 않았을 때도 천천히 변형이 되는 효과를 낼 수 있다.

 

 

2. nth-child 

nth-child는 순서를 부여하는 가상클래스이다. (가장 대표적인 순서부여 가상클래스)

선택자:nth-child(순서) (띄어쓰기는 역시 X)

 

  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  .box {
    border: 5px solid black;
    text-align: center;
}

.box div {
    border: 5px solid black;
    margin: 10px;
    width: 200px;
    height: 200px;
    display: inline-block;
}

.box div:nth-child(1) {
    background-color: dodgerblue;
}
.box div:nth-child(2) {
    background-color: red;
}
.box div:nth-child(3) {
    background-color: white;
}
.box div:nth-child(4) {
    background-color: yellow;
}

 

하지만 주의할 점이 있다. CSS부분은 변경하지 않고 자식요소에 p태그를 추가하였다. 

<div class="box">
    <p>hello</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

 

자식요소 중 div태그에 순서를 부여하였지만, 엉뚱한 p태그도 함께 카운트를 해버렸다. 

(2, 3, 4, 5번으로 순서가 밀림) 즉, nth-child는 단지 출현 순서를 따진다. (태그를 구분하지 않고)

 

이를 해결하기 위한 다른 방법이 있다. 

 

3. nth-of-type

 

nth-of-type은 태그를 구분하여 순서를 부여한다.

.box div:nth-of-type(1) {
    background-color: dodgerblue;
}
.box div:nth-of-type(2) {
    background-color: red;
}
.box div:nth-of-type(3) {
    background-color: white;
}
.box div:nth-of-type(4) {
    background-color: yellow;
}

이렇게 작성하면 해당하는 값에만 색이 입혀진다