210422. Today I Learned(TIL) : CSS Selector


CSSセレクタベースのクリア
  • デフォルトコレクタ
  • h1 {}
    div {}
  • フルコレクタ
  • * {}
    
    // 브라우저 초기화
    * {
    margin: 0;
    padding: 0;
    }
  • マルチセレクタ
  • section, h1 {} // 쉼표로 구분
  • IDコレクタ
  • #something {}
  • 段コレクタ
  • .someone {}
    .anyone {}
  • 子孫選択器(親のすべての子孫、子供などを選択)
  • header h1 {} // 띄어쓰기 한 칸으로 표시
  • 子セレクタ(親を選択する直系子)
  • header > p {} // 부등호로 표시
  • 兄弟コレクター
  • section ~ p {} // section의 형제 엘리먼트 중 p를 선택
  • 隣接兄弟コレクター
  • section + p {} // section과 인접한 모든 p 형제 엘리먼트들을 선택
  • 不定コレクタ
  • input:not([type="something"])
    div:not(:nth-of-type(2))
  • (構造仮想クラスコレクタ:正確な意味が分からない)
  • p:first-child { }
    ul > li:last-child { }
    ul > li:nth-child(2n) { }
    section > p:nth-child(2n+1) { }
    ul > li:first-child { }
    li:last-child { }
    div > div:nth-child(4) { }
    div:nth-last-child(2) { }
    section > p:nth-last-child(2n + 1) { }
    p:first-of-type { }
    div:last-of-type { }
    ul:nth-of-type(2) { }
    p:nth-last-of-type(1) { }