기본 선택자

  태그 선택자 : tag

  클래스 선택자 : .class

  ID 선택자 : #id

<style>
    tag {
    	color : red;
    }
    .class {
    	color : red;
    }
    #id {
    	color : red;
    }
    
    span#id {
    	color : red;
    }
    
    div.class {
    	color : green;
    }
</style>

그룹선택자( , ) : 여러개 선택

<style>
    h1, .class, #id {
    	color : red;
    }
</style>

후손선택자(공백) : 아래의 모든 하위요소 선택

<html>
  <head>
    <style>
        #hello span {		/* #hello 아래에 존재하는 모든 span */
            color : red;
        }

    </style>
  </head>
  <body>
      <div id="hello">
      	<div>
     	    <span> span tag1 </span>
        </div>
        <span> span tag2 </span>
    </div>
  </body>
</html>

→span tag1, tag2 선택

자식선택자( > ) : 바로 아래의 하위요소 선택

<html>
  <head>
    <style>
        #hello > span {		/* 오직 #hello 바로 아래에 위치한 span */
            color : red;
        }

    </style>
  </head>
  <body>
      <div id="hello">
     	<div>
            <span> span tag1 </span>
        </div>
        <span> span tag2 </span>
    </div>
  </body>
</html>

→span tag2만 선택

구조 선택자

 - n번째 자식선택 (nth-child)

<html>
  <head>
    <style>
        #hello > p:nth-child(2) {
            color : red;
        }

    </style>
  </head>
  <body>
      <div id="hello">
      	<p>1번째 단락입니다.</p>
        <p>2번째 단락입니다.</p>
        <p>3번째 단락입니다.</p>
        <p>4번째 단락입니다.</p>
    </div>
  </body>
</html>

→2번째 p태그 선택

속성 선택자 [ ] : 태그의 속성선택

<html>
  <head>
    <style>
        input[type='text'] {
            color : red;
        }
        input[type='password'] {
            color : blue;
        }

    </style>
  </head>
  <body>
    <form>
    	<input type='text'>
        <input type='password'>
    </form>
  </body>
</html>

반응 선택자  

 - :active : 마우스 클릭

 - :hover : 커서를 올린 상태

<style>
    h1:hover {
    	color : red;
    }
    h1:active {
    	color : blue;
    }
</style>
<body>
	<h1>반응 선택자</h1>
</body>

상태 선택자

 - :checked : 체크 상태의 태그 선택

 - :focus : 포커스를 맞춘 태그 선택

 - :enabled : 사용 가능한 태그 선택

 - :disnabled : 사용 불가능한 태그 선택

<style>
    /* input 태그가 사용 가능할 경우 */
    input:enabled { background-color: white; }

    /* input 태그가 사용 불가능할 경우 */
    input:disabled { background-color: gray; }

    /* input 태그에 초점이 맞추어진 경우*/
    input:focus { background-color: orange; }
</style>