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

새롭게 알게 된 것

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

• 이유는 모르겠지만, 에디터의 문제로 순번이 매겨지지 않음.

1. 태그와 id 또는 class를 통해 선택하고 싶을 때

• <orange class="small"></orange>
• orange.small {};

2. 부모 태그와 자식 태그의 관계를 이용해 선택하고 싶을 때

   <bento>
     <orange></orange> 
   </bento>

• bento orange {};

3. 특정 태그의 하위 태그를 모두 선택하기

• plate * {};

4. 특정 태그 뒤에 오는 태그 선택하기

• plate + apple
• plate태그 뒤에 오는 모든 apple태그 선택.

5. 특정 태그 뒤에 오는 모든 태그를 범위를 지정하여 선택하기

• plate ~ apple
• plate 태그 뒤에 몇 개의 apple 태그가 오든 모두 선택

  <bento>
    <orange class="small" />
  </bento>
  <pickle class="small" />
  <pickle />
  <plate>
    <pickle />
  </plate>

6. 바로 하위 단계에 있는 요소만 가져오기

• A > B
• A 바로 하위에 있는 B만 가져오기
• 만약 A B라고만 하면, 바로 하위 뎁스가 아니라, 뎁스가 더 깊게 있더라도 가져옴.

7. 유일한 자식 요소만 가져오기

• ul li:only-child
• ul 태그 안에 있는 유일한 자식 요소인 li 태그만 선택하기

8. 조건을 만족하는 첫 번째 태그 가져오기

• div apple:first-type-of
• div 태그 안에서 등장하는 첫 번째 apple 태그 선택하기

9. 홀수번째 태그만 선택하기

• .example:nth-of-type(odd)
• example 클래스의 홀수번째 태그만 선택하기

10. 각 태그의 마지막 요소만 가져오기

• orange:nth-of-type, apple:nth-of-type
• 마지막 orange와 apple 태그를 가져오기

11. 빈 태그 가져오기

• div:empty

12. 해당하지 않는 태그를 제외하고 가져오기

• apple:not(.small)
• class가 small이 아닌 apple 태그들만 가져오기

13. 특정 속성을 갖는 태그를 가져오기

• a[href]
• href 속성을 갖는 모든 a태그를 선택하기

14. 특정 속성에, 특정 값을 갖는 태그 가져오기

• input[type="checkbox"]