선택자

- 선택자 연습 사이트 : https://flukeout.github.io/

CSS Diner

- 강의 : https://opentutorials.org/course/2418/13500

선택자 - 생활코딩

- 치트시트

1. 부모자식 선택자 : 띄어쓰기

• a b : a아래 있는 b만 선택
  ex) plate apple : plate아래 apple이 몇 depth에 있던 아래에 있기 때문에 선택됨
  
• a>b : a아래 1-level deep b 선택, 복수 선택 가능
  ex) plate>apple : plate 바로 아래있는 apple만 선택
  

 

2. &&조건 선택자 : 띄어쓰기안넣고 아이디나 클래스를 붙여서 작성

• a#b : a태그이면서 동시에 id가 b인 선택자
• a.b : a태그이면서 동시에 class가 b인 선택자

3. * 선택자 : 모두선택

• * : 싹다 
• a * : a태그 아래 모두
  ex) plate * : 아래세개 선택됨
  

4. 형제선택자

• a+b : a 뒤에오는 b 한개
  ex) plate+apple : 아래 두개 선택됨, 다다음것들은 선택안됨
  
• a~b : a 뒤에오는 b 모두
  ex) plate~apple : plate뒤에 오는 apple은 모두 선택됨
  

5. 가상클래스 선택자 : 클래스는 아닌데 element의 현재 속성, 순서갖다가 판별하고싶을때 사용

5-1. 속성으로 선택

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때

5-2. child

• :first-child : 첫번째 자식
  • 단독사용
    :first-child : 누군가의 첫번째 자식
    
  • orange:first-child : orange이면서 누군가의 첫번째 자식
    
  • plate orange:first-child: orange이면서 plate의 첫번째 자식
    
    
• :only-child : 외동 자식
  • 단독사용
    :only-child : 누군가의 외동 자식
    
    (orange는 외동 자식이 아니기 때문에 선택되지 않음)
  • pickle:only-child : 외동인 pickle들
    
  • plate pickle:only-child : plate 아래 외동인 pickle들
    
  • plate> :only-child : plate 바로 아래 1단계이면서 누군가의 외동 자식
    
• :last-child : 형제중 마지막 자식(같은 level에서 마지막)
• :nth-child(n) : 형제중 n번째 자식(같은 level에서 n번째)
  bento:nth-child(4) : 누군가의 자식이면서, 형제중 4번째인 bento
  
  orange 형제들에 bento가 하나 더있었으면 동일 level에서 4번째임은 같기 때문에 둘다 선택됐을것
• :nth-last-child(n) : 형제중 뒤에서 n번째 자식
• :empty : 자식이 없는 요소 선택

5-3. type

• :first-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소
  orange:first-of-type
  
• :nth-of-type(A) : 자신의 유형과 일치하는 A번째 요소, odd, even 가능
  plate:nth-of-type(even) : type들 중 짝수 선택
  
• :nth-of-type(An+b) : 유형 중 n에 0,1,2,... 순으로 넣었을 때의 index 번째 선택
  plate:nth-of-type(2n+3) : plate중 3,5번째
  
• :only-of-type : 유형 중 단독으로 있는 요소 선택
  apple:only-of-type : apple중 단독으로 있는 요소
  
• :last-of-type : 유형 중 마지막 요소 선택
  .small:last-of-type
  

5-4 not

:not(selector) : selector가 아닌 요소들 선택
apple:not(.small)

6. Attribute Selector

6.1. [attribute]

[for] : for속성을 가진 요소들 선택

6.2. A[attribute] : element의 속성으로 선택 (css속성X)

plate[for] : plate중 for속성을 가진 요소들 선택

6.3 [attribute="value"]

[for="abc"] : for 속성의 값이 abc인 요소들 선택

6.4 [attribute^="value"]

[for^="abc"] : for 속성의 값이 abc로 시작하는 요소들 선택

6.5 [attribute$="value"]

[for$="abc"] : for 속성의 값이 abc로 끝나는 요소들 선택

6.6 [attribute*="value"]

[for*="abc"] : for 속성의 값에 abc가 포함되면 선택