개발로드 2-2. 프론트앤드 기본 지식(CSS선택자)

https://flukeout.github.io/

CSS Diner

 

1. #id
   

   

   #fancy

2. A B(부모 자식)
   

   

   plate apple(접시 위 사과)

3. #id A
   

   

   #fancy pickle(fancy라는 접시 위 피클)

4. A.class
   

   

   apple.small(클래스가 'small'인 사과)[apple]없이 [.small]도 가능

5. 1~4 종합
   

   

   bento orange.small(bento 위 'small'인 오렌지

   

6. A,B
   

   

   bento, plate(bento, plate위의 모든것)

   

7. *(전부다)
   

   

   *

   
   

   

8. A *(A의 모든것)
   

   

   palte *

   
   

   

9. A + B(인접 형제 결합자)
   

   

   plate + (plate 옆(바로다음)의 것)

   

10. A ~ B(일반 형제 결합자)
    

    

    bento ~ pickle(bento 이후 나오는 pickle들)

    

11. A > B(직계 자손 선택)

    

    plate > apple(plate 바로 위 apple)

12. :first-child
    

    

    plate orange:first-child(plate 위 처음 등장하는 orange)

13. only Child
    

    

    plate>:only-child(plate위의 단독적으로만 있는 자식들)

    
    

    

14. :last-child
    

    

    *:last-chid.small

15. :nth-child(n)
    

    

    *:nth-child(3) (3번쨰 자식)

16. :nth-last-child(n)
    

    

    bento:nth-last-child(3)

    
    
    
    
17. :first-of-type
    

    

    apple:first-of-type(처음으로 작성된 apple)

    
    

    

    
    
    
18. :nth-of-type(A)
    

    

    :nth-of-type(even) (짝수번째 plate들)

    

19. :nth-of-type(An+B)
    

    

    plate:nth-type-of(2n+3)

    

20. :only-of-type
    

    

    apple:only-of-type

21. :last-of-type
    

    

    orange:last-of-type, apple:last-of-type

22. :empty
    

    

    bento:empty

23. :not(A)
    

    

    apple:not(.small)

    

24. [attribute]
    

    

    [for]

25. A[attribute]
    

    

    plate[for]

26. [attribute="value"]
    

    

    [for="Vitaly"]

27. [attribute$="value"]
    

    

    [for$="to"] (attribute value값이 "str"로 끝나는 것)

28. [attribute*="value"]
    

    

    [for*="to"] (attribute value값에 "str"가 포함된 것)