[CSS3] 02. 셀렉터

[CSS3] 02. 셀렉터

 

 

1. 전체 셀렉터 (Universal Selector)

  <style>
    * { color: red; }
  </style>

 

2. 태그 셀렉터 (Type Selector)

  <style>
    p { color: red; }
  </style>

 

3. ID 셀렉터 (ID Selector)

  <style>
    #p1 { color: red; }
  </style>

 

4. 클래스 셀렉터 (Class Selector)

  <style>
    .container { color: red; }
  </style>

 

5. 어트리뷰트 셀렉터 (Attribute Selector)

  <style>
    a[href] { color: red; }
  </style>
  
  <style>
    a[target="_blank"] { color: red; }
  </style>
  
   <style>
    h1[title~="first"] { color: red; }
  </style>
  
    <style>
    p[lang|="en"] { color: red; }
  </style>
  
    <style>
      a[href^="https://"] { color: red; }
  </style>

  <style>
    a[href$=".html"] { color: red; }
  </style>

  <style>
    div[class*="test"] { color: red; }
    div[class~="test"] { background-color: yellow; }
  </style>

 

6. 복합 셀렉터 (Combinator)

 6.1 후손 셀렉터 (Descendant Combinator)

  <style>
    div p { color: red; }
  </style>

 

 6.2 자식 셀렉터 (Child Combinator)

  <style>
    div > p { color: red; }
  </style>

 

 6.3 형제(동위) 셀렉터 (Sibling Combinator)

  6.3.1 인접 형제 셀렉터(Adjacent Sibling Combinator)

  <style>
    p + ul { color: red; }
  </style>

 

  6.3.2 일반 형제 셀렉터(General Sibling Combinator)

  <style>
    p ~ ul { color: red; }
  </style>

 

7. 가상 클래스 셀렉터 (Pseudo-Class Selector)

  <style>
    a:hover { background-color: red; }
    input:focus { background-color: yellow; }
  </style>

 

 7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

  <style>
    a:link { color: orange; }
    a:visited { color: green; }
    a:hover { font-weight: bold; }
    a:active { color: blue; }
    input[type=text]:focus,
    input[type=password]:focus {
      color: red;
    }
    </style>

 

 7.2 UI 요소 상태 셀렉터(UI element states pseudo-classes)

  <style>
    input:enabled + span {
      color: blue;
    }
    input:disabled + span {
      color: gray;
      text-decoration: line-through;
    }
    input:checked + span {
      color: red;
    }
  </style>

 

 7.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)

  <style>
    p:first-child { color: red; }
    p:last-child { color: blue; }
  </style>
  
    <style>
    ol > li:nth-child(2n)   { color: orange; }
    ol > li:nth-child(2n+1) { color: green; }
    ol > li:first-child     { color: red; }
    ol > li:last-child      { color: blue; }
    ol > li:nth-child(4)    { background: brown; }

     ul > :nth-last-child(2n+1) { color: red; }
    ul > :nth-last-child(2n)   { color: blue; }
  </style>
  
    <style>
    p:first-of-type  { color: red; }
    p:last-of-type   { color: blue; }
    p:nth-of-type(2) { color: green; }
    p:nth-last-of-type(2) { color: orange;}
    p:first-child { background: brown;}
  </style>

 

 7.4 부정 셀렉터(Negation pseudo-class)

  <style>
      input:not([type=password]) {
      background: yellow;
    }
  </style>

 

 7.5 정합성 체크 셀렉터(validity pseudo-class)

  <style>
    input[type="text"]:valid {
      background-color: greenyellow;
    }

    input[type="text"]:invalid {
      background-color: red;
    }
  </style>

 

8. 가상 요소 셀렉터 (Pseudo-Element Selector)

  <style>
    p::first-letter { font-size: 3em; }
    p::first-line   { color: red; }
    h1::before {
      content: " HTML!!! ";
      color: blue;
    }
    h1::after {
      content: " CSS3!!!";
      color: red;
    }
    ::selection {
      color: red;
      background: yellow;
    }
  </style>

 

참고:

- CSS selectors: https://quirksmode.org/css/selectors/