[CSS]CSS 선택자

CSS Selector

• css에서 선택을 잘 하는것이 중요하다
• html 문서에서 css 규칙을 적용할 요소를 정의
• 기본선택자
  • 전체선택자 : *을 사용하자
    • html 문서 내 모든 요소를 선택
    • {style properties}
  • 타입선택자 :
    • 태그명을 이용하여 스타일을 적용할 태그를 선택
    • HTML 내에서 주어진 유형의 모든 요소를 선택
    • element{style properties}
  • 클래스선택자 :
    • class 가 적용된 모든 태그를 선택
    • html 내에서 동일한 클래스 명을 중복해서 사용할 수 있다
    • 사용법 → .class-name{style properties}
    • 대소문자 구별
  • id선택자
    • id특성값을 비교하여, 동일한 id를 가진 태그를 선택
    • HTML 내에서 주어진 id를 가진 요소가 하나만 존재해야 한다
    • #id-value{style properties}
    • 대소문자 구별
    • 중복안됨, css 한번 만들면 html에 딱 한번 사용가능
    • but, 클래스는 중복되고, css한번 만들면 html에 무한대로 사용가능→재사용
  • 특성선택자
• 그룹선택자
  • , 를 이용하여 선택자 그룹을 생성하는 방법
  • 모든 일치하는 노드를 선택
  • element, element{style properties}
• 결합자
  • 자손 결합자
    • 첫번째 요소의 자손인 노드를 선택
    • selector1 selector2 {style properties}
  • 자식 결합자
    • 첫번째 요소의 바로 아래 자식인 노드를 선택
    • selector1>selector2 {style properties}
  • 일반 형제 결합자
    • 첫번째 요소를 뒤따르면서 같은 부모를 공유하는 두번째 요소를 모두 선택
    • former-element ~ target-element{style properties}
  • 인접 형제 결합자
    • 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두번째 요소 선택
    • former-element + target-element{style properties}
• 의사클래스/요소
  • 의사클래스
  • 의사요소
• 우선순위
  • 같은 요소에 두 개 이상의 css 규칙이 적용된 경우 → 마지막 규칙, 구체적인 규칙, !important가 우선 적용
  • class보다 id가 더 구체적이기 때문에 id가 더 우선순위가 높다
• 상속
  • 부모요소에 적용된 스타일이 자식 요소에게 상속될 수도 있고 ,안될 수도 있음
  • 상속되는 속성 :
    • 요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산 값을 얻음 → color 속성
  • 상속되지 않는 속성 :
    • 요소의 상속되지 않는 속성에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻음 → border 속성