CSSセレクタ(Selector)-(1)

  h1 {
  	color:blue;
    }
    
    

  
  	input[type="password"] {
    	background-color:black;
        color:white;
        }
  
  

  a[href*="naver"] {
  	color: lightgreen;
    }
  a[href*="youtube"] {
  	color: red;
    }
  
  

• child를 이용한 선택자 : first-child, last-child, nth-child로 나눠서 쓸 수 있는 이 선택자는 해당 클래스, 아이디, 혹은 요소를 자식요소로 하는 부모요소의 첫번째 자식요소에 스타일을 적용한다. 이러한 룰을 가지고 있기 때문에 만약 해당 요소의 부모요소의 첫번째 자식요소가 지정한 요소 혹은 클래스, 아이디에 속하지 않는다면, 원하는 대로 첫번째 자식요소에 스타일을 적용할 수 없다. 사용법은

        
        	tr:first-child {
          	/*이렇게 쓰거나*/
          }
          tr:last-child {
          	/*이렇게 쓰거나*/
          }
          tr:nth-child(3) {
          	/*이렇게 쓴다 */
          }
          /* 이 때, nth-child의경우 매개변수의 수를 직접 지정할 수도 있지만, 
          여기에 2n-1 or 2n을 써주면 각각 홀수와 짝수에만 적용되고, 
          매개변수에 odd, even을 넣으면 이것도 마찬가지로 홀수 짝수로 적용된다.
        
        

  위와 같다.

• of-type을 이용한 선택자 : 위의 child와 유사하지만, 약간 다른데, of-type 선택자는 해당 선택자가 가리키는 요소의 부모 요소 중 해당 선택자가 가리키는 '타입'과 일치하는 것 혹은 '클래스 혹은 id 등'과 일치하는 경우에 한해서 적용한다. 예를 들어, tr:first-of-type을 써주면, tr태그의 부모요소인 table 요소의 자식 요소중 tr 태그와 같으면서(and) 첫번째 요소에 스타일을 걸어준다. 이외에도 last-of-type이면 자식요소중 특정 태그와 같으면서(and) 마지막 요소에 걸어주고, nth-of-type(n)은 똑같이 같으면서 n번째 요소에 걸어준다. nth-of-type도 nth-child와 똑같이 odd, even 혹은 2n-1, 2n으로 짝수, 홀수를 함수처럼 적용해줄 수 있다.
child vs of-type : 둘의 근본적인 차이는 단지 부모요소의 n번째 자식요소에 적용할지(child) 아니면 동일한 타입을 기준으로 n번째에 적용할지(of-type)이다. 그래서, first-child를 쓰면 만약 맨위에(첫번째 자식요소) 태그가 선택자가 선택한 태그가 아닌 경우(혹은 선택한 클래스명 등이 아닐 때에는)에는 적용되지 않는다. 하지만, first-of-type으로 적용하면, 맨위에 요소가 선택한 태그가 아닐 경우에도 그 아래에 선택한 태그가 한개라도 있으면 그중에 첫번째 요소에 적용되게 된다. 즉, 타입을 기준으로 첫번째 요소를 선택하기 때문에 위의 경우와 같이 아무것도 적용되지않는 상황은 발생하지 않는다. 하지만, of-type에도 클래스명으로 선택자를 지정했을 때, 만약 부모요소의 자식요소로 다양한 타입, 예를 들어, div, p태그 등이 있었을 때, 그리고 그 모두의 클래스명이 동일할 때, div 태그중 첫번째 요소, p태그중 첫번째 요소 모두에 적용이 된다는 점이 직관적으로 이해가 어렵기 때문에 이부분에 대한 고려가 필요하다(사용시에).
• :not() 선택자 : 이것은 간단하게 말하면, 예를 들어, input type="password" 빼고 모든 input에 background-color:blue를 주고 싶을 때 사용할 수 있는데, 이런식으로 사용한다.

  input:not(input[type="password"]) {
        	background-color:blue; 
        }
        /* 혹은 */
  input:not(.passwordInput) {
  	background-color:blue;
  }
  /*이런식으로 클래스명을 넣어줄수도 있다( id도 가능 )*/
        

• 最後に動的仮想クラスセレクタがあります.動的仮想クラスセレクタは、ユーザと対話するときに使用される部分をモデリングするために使用され、例えば、ユーザがある要素上で停止(すなわちマウスを上に移動)したときにcursor:pointerなどを与えるために使用される.

  a[href^="https"]:hover {
        cursor:pointer;
        }
        /* 이런식으로 뒤에 :를 붙여서 써준다. */

  のほか、active、focus(マウスクリック入力やカーソルサスペンション時にスタイリングに使用されるセレクタ)、enabled、disabled、checkedなどがあります.また、aラベルで使用可能なa:linkおよびa:onsed、その他の使用可能なhover、activeも表示されます.aラベルにlink動的仮想クラスセレクタと書くと、アクセスレコードに基づいて、ユーザーがリンクにアクセスしたことがないときのリンクがモデリングされます.ただし、アクセスレコードにアクセス済みとして記録されている場合は、アクセスに割り当てられたスタイルが適用されます.hoverはさっき説明したように、activeは実際にマウスでリンクをクリックして移動する前の造形を指定します.ある要素にマウスを置くと、activeは実際にマウスをクリックして取り外す前の動作に相当します.この場合,これまで述べた4つの選択者は順序を守って書かなければならない(1つの要素に適用される場合).LVHA(link、訪問者、hover、active)順に書けばいいです.