FrontEnd/HTML&CSS

[CSS]CSS 선택자

이수밈 2023. 8. 6. 11:42

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 속성