#TIL31

CSS 선택자

• ＊
  전체 선택자 (Universal Selector)
  모든 요소를 선택

• ABC
  태그 선택자 (Type Selector)
  태그 이름이 ABC인 요소 선택.

• .ABC
  클래스 선택자 (Class Selector)
  HTML class 속성의 값이 ABC인 요소 선택

• #ABC
  아이디 선택자 (ID Selector)
  HTML id 속성의 값이 ABC인 요소 선택

• ABCXYZ
  일치 선택자 (Basic Combinator)
  선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

• ABC > XYZ
  자식 선택자 (Child Combinator)
  선택자 ABC의 자식 요소 XYZ 선택

• ABC XYZ
  하위(후손) 선택자 (Descendant Combinator)
  선택자 ABC의 하위 요소 XYZ 선택, '띄어쓰기'가 선택자의 기호!

• ABC + XYZ
  인접 형제 선택자 (Adjacent Sibling Combinator)
  선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

• ABC ~ XYZ
  일반 형제 선택자 (General Sibling Combinator)
  선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

• ABC:hover
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

• ABC:active
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

• ABC:focus
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC 요소가 포커스되면 선택

• ABC:first-child
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC가 형제 요소 중 첫째라면 선택

• ABC:last-child
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC가 형제 요소 중 막내라면 선택

• ABC:nth-child(n)
  가상 클래스 선택자 (Pseudo-Classes)
  선택자 ABC가 형제 요소 중 (n)째라면 선택

• ABC:not(XYZ)
  부정 선택자 (Negation)
  선택자 XYZ가 아닌 ABC 요소 선택

• ABC::before
  가상 요소 선택자 (Pseudo-Elements)
  선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입

• ABC::after
  가상 요소 선택자 (Pseudo-Elements)
  선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입

• [ABC]
  속성 선택자 (Attribute)
  속성 ABC을 포함한 요소 선택

• [ABC="XYZ"]
  속성 선택자 (Attribute)
  속성 ABC을 포함하고 값이 XYZ인 요소 선택

• 선택자[속성~=값]
  속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택

• 선택자[속성^=값]
  속성 안의 값이 특정 값으로 시작하는 태그를 선택

• 선택자[속성$=값]
  속성 안의 값이 특정 값으로 끝나는 태그를 선택

• 선택자[속성*=값]
  속성 안의 값이 특정 값을 포함하는 태그를 선택

• :first-of-type
  형제 관계 중 앞에서 첫 번째로 등장하는 요소 선택

• :last-of-type
  형제 관계 중 마지막으로 등장하는 요소 선택

• :nth-of-type(n)
  형제 관계 중 앞에서 (n)째로 등장하는 요소 선택

• :nth-last-of-type(n)
  형제 관계 중 뒤에서 (n)째로 등장하는 요소 선택

---

선택자 우선순위

• 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
  어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
• 점수가 높은 선언이 우선함
• 점수가 같다면, 가장 마지막에 해석된 선언이 우선함
• !important: 9999999999점
• html 문서에 인라인 선언: 1000점
• ID 선택자: 100점
• Class 선택자: 10점
• 태그 선택자: 1점
• 전체 선택자: 0점
• 상속: X
• 정리: !important > 인라인 선언 > ID > Class > 태그 > 전체

---

상속되는 CSS 속성들

• 글자/문자 관련 속성들은 대부분 상속됨(모든 글자/속성은 아님 주의)
  font-style : 글자 기울기
  font-weight : 글자 두께
  font-size : 글자 크기
  line-height : 줄 높이
  font-family : 폰트(서체)
  color : 글자 색상
  text-align : 정렬

• 강제상속을 하고싶다면 자식에 inherit 값 부여

<예시>

<div class="parent">
  <div class="child"></div>
</div>

.parent {
background-color: red;
height: 200px;
width: 300px;
}
 .child {
background-color: inherit;
height: inherit;
width: 100px;
}