CSS선택자(가상클래스 선택자)

가상클래스 선택자(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