[css] 선택자를 공부하자

🎁 1. 기본 선택자

• 전체선택자 *

• 유형선택자 elementName

• 클래스 선택자 .className

• ID 선택자 #idName

• 특성선택자❗️ [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

  /*특정선택자 예제*/
  a[title] { /*a태그 속성(attr)이 title인 태그*/
   ...
  } 
  
  /*a태그 속성(attr) href의 값이 정확히 https://example.org"인 태그*/
  a[href="https://example.org"] { 	 
   ...
  }
  
   /*a태그 속성(attr) href의 값에 "example"을 포험하는 태그*/
  a[href*="example"] {
   font-size: 2em;
  }
  
    /*a태그 속성(attr) href의 값의 "끝"이 ".org" 인 태그
    앞은 ^ */
  a[href$=".org"] {
   font-style: italic;
  }

🎁 2. 그룹선택자

• ul,li 쉼표구분

🎁 3. 결합자

• 자손 결합자 ul li 공백구분
• 자식 결합자 ul > li
• 일반 형제 결합자❗️ p ~ span
  p 뒤에 위치하는 "형제 요소" span 모두 선택
• 인접 형제 결합자❗️ p + span
  선택자 p 바로 뒤에 위치하는 "형제 요소" span 선택

🎁 4. 의사 클래스/요소

🔗의사 클래스

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

🔗의사 요소

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

선택자 활용 예제

	/*체크박스가 체크가 되면 형제요소 div에 스타일 실행*/
   input[type="checkbox"]:checked + div {
        height: 0;
   }
      
    /*마우스 호버되면 에니메이션 멈츔*/
   ### animation-play-state: paused
	&:hover{
    animation-play-state: paused;
    }

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors