[CSS] 선택자

rakkoon23·2020년 6월 21일
0

My-Own-CSS-Wiki

목록 보기
3/3
post-thumbnail
  • 공부한 페이지 : https://flukeout.github.io/#
  • CSS Diner는 CSS 선택자에 대해 재밌게 공부할 수 있도록 만든 사이트이다.
  • 32단계까지 있는데, 모두 완료했다(뿌듯).

새롭게 알게 된 것

참고) 아래의 순번은 CSS Diner의 번호와 다름.

  • 이유는 모르겠지만, 에디터의 문제로 순번이 매겨지지 않음.
  1. 태그와 id 또는 class를 통해 선택하고 싶을 때
  • <orange class="small"></orange>
  • orange.small {};
  1. 부모 태그와 자식 태그의 관계를 이용해 선택하고 싶을 때
    <bento>
      <orange></orange> 
    </bento>
  • bento orange {};
  1. 특정 태그의 하위 태그를 모두 선택하기
  • plate * {};
  1. 특정 태그 뒤에 오는 태그 선택하기
  • plate + apple
  • plate태그 뒤에 오는 모든 apple태그 선택.
  1. 특정 태그 뒤에 오는 모든 태그를 범위를 지정하여 선택하기
  • plate ~ apple
  • plate 태그 뒤에 몇 개의 apple 태그가 오든 모두 선택
    <bento>
      <orange class="small" />
    </bento>
    <pickle class="small" />
    <pickle />
    <plate>
      <pickle />
    </plate>
  1. 바로 하위 단계에 있는 요소만 가져오기
  • A > B
  • A 바로 하위에 있는 B만 가져오기
  • 만약 A B라고만 하면, 바로 하위 뎁스가 아니라, 뎁스가 더 깊게 있더라도 가져옴.
  1. 유일한 자식 요소만 가져오기
  • ul li:only-child
  • ul 태그 안에 있는 유일한 자식 요소인 li 태그만 선택하기
  1. 조건을 만족하는 첫 번째 태그 가져오기
  • div apple:first-type-of
  • div 태그 안에서 등장하는 첫 번째 apple 태그 선택하기
  1. 홀수번째 태그만 선택하기
  • .example:nth-of-type(odd)
  • example 클래스의 홀수번째 태그만 선택하기
  1. 각 태그의 마지막 요소만 가져오기
  • orange:nth-of-type, apple:nth-of-type
  • 마지막 orange와 apple 태그를 가져오기
  1. 빈 태그 가져오기
  • div:empty
  1. 해당하지 않는 태그를 제외하고 가져오기
  • apple:not(.small)
  • class가 small이 아닌 apple 태그들만 가져오기
  1. 특정 속성을 갖는 태그를 가져오기
  • a[href]
  • href 속성을 갖는 모든 a태그를 선택하기
  1. 특정 속성에, 특정 값을 갖는 태그 가져오기
  • input[type="checkbox"]
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글