[중앙정보처리학원] CSS* 가상 수도 클래스 선택자

 

가상 클래스

 

가상 클래스 선택자

 

반응형 효과를 낼 수 있다. 밑의 코드 참조

  <style>
    a {
      color: orange;
    }

    .box {
      width: 100px;
      height: 100px;
      background: red;
      transition: 0.7s;
    }
    .box:hover {
      width: 200px;
      background: orange;
    }
    .box:active {
      height: 200px;
      background: yellowgreen;

    }

    #common {
      width: 100px;
      margin-top: 20px;
      padding: 5px;
      outline: none;
      transition: 0.5;
    }

    #common:focus {
      border-color: red;
      width: 200px;
    }
  </style>

 

 

 

 

 

 

 

수도 클래스 

 

 

수도 클래스 선택자

 

 

수도 클래스를 통해 특정 태그를 지정 할 수 있다. 간혹 연산자를 사용하고 음수를 사용할 수도 있다. 예를들어 li:nth-child(n+3) 이란 

코드가 있다면 3이 더해진 순서에 오는 태그들을 전부 지칭할 수있다. li:nth-child(-n+2)는 [2,1,0,-1,-2 ...] 이 될 것이니 1,2 번째의 

태그만 보여질 수도 있다는 것이다.

<style>
    
    #fruits li:nth-child(3) {
      color: red;
    }

    #food li:last-child {
      background: rgb(241, 226, 127);
    }

    fruits li:first-child {
      font-size: 24px;

      /* fsz24 */
    }

    /* n에 0부터 순차적으로 대입해봤을 때 선택되는 태그를 스타일 */
    #fruits li:nth-child(even) {
      background: aqua;
    }
    #fruits li:nth-child(odd) {
      background: rgb(234, 36, 214);
    }
    #fruits li:nth-child(n+3) {
      font-style: italic;
    }

    #food li:not(.melon) {
      list-style: none;
    }

    .sports div:nth-child(3) {
      background: blue;
      
    }

    .sports div:nth-of-type(3) {
      background: red;
    }


  </style>