CSS 선택자와 상속

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

CSS selector

CSS selector(이하 선택자)는 HTML 파일에서 작성한 엘리먼트들을 선택하는 것을 말한다.
이 선택자는 태그명, 아이디, 클래스 등으로 선택할 수 있다. 

기본 선택자

• * : (전체 선택자) 내부의 모든 요소를 선택
• 태그명 : (태그 선택자) 태그 이름을 선택자로 선택
• #아이디이름 : (아이디 선택자) 아이디 이름을 선택자로 선택
• .클래스이름 : (클래스 선택자) 클래스 이름을 선택자로 선택

복합 선택자

• 일치 선택자 : 선택자1선택자2를 복합적으로 선택 (두 가지가 동시에 만족되어야 하며, 선택자가 붙어 있음)
• 자식 선택자 : 선택자1 > 선택자2 선택자1의 자식 선택자를 찾아서 선택
• 후손(하위) 선택자 : 선택자1 선택자2 선택자1 속에 있는 모든 요소 중에서 선택자2를 찾아서 선택
• 인접 형제 요소 선택자 : 선택자1 + 선택자2 선택자1 다음에 나오는 형제 요소 1개
• 일반 형제 요소 선택자 : 선택자1 ~ 선택자2 선택자1 다음에 나오는 형제 요소 모두

인접 형제 요소 선택자와 일반 형제 요소 선택자는 선택자1의 앞쪽의 형제는 찾지 않는다.

<div> // 1
 <ul> // 2
  <li></li> // 3
  <li class="orange"></li> // 4
  <li></li> // 5
  <li></li> // 6
 </ul>
</div>

1. li.orange {} : li와 .orange가 동시에 일치되어야 선택됨 (일치 선택자) → 4
2. ul > li {} : ul의 자식인 li를 전부 선택됨 (자식 선택자) → 3, 4, 5, 6
3. div .orange {} : div속에 있는 모든 선택자 중에서 .orange가 선택됨 (후손(하위) 선택자) → 4
4. .orange + li {} : .orange 다음에 오는 형제 li 1개가 선택됨 (인접 형제요소 선택자) → 5
5. .orange ~ li {} : .orange 다음에 오는 형제 li가 모두 선택됨 (일반 형제요소 선택자) → 5, 6

가상 클래스 선택자

• :hover : 마우스가 올라가 있는 동안
• active : 마우스를 클릭하고 있는 동안
• focus : 포커스가 된 동안대화형 콘텐츠에서 사용이 가능함
• first-child : 형제 요소 중 첫 번째
• last-child : 형제 요소 중 마지막
• nth-child(n) : 형제 요소 중 n번째 요소 선택 (n키워드 사용 시 0부터 해석)

XXX-child 주의사항

.fruits p:nth-child(n)

위 예시의 경우 아래와 같은 순서로 해석해서 선택한다.

1. .fruits
2. :nth-child(n)
3. p
4. E:nth-of-type(n) : E와 동일한 타입 형제 요소 중 E가 n번째 이면 선택한다.

부정 선택자

E:not(s) : E 중에서 S가 아닌 것 선택

가상 요소 선택

• : ≠ ::
• E::before : E요소 내부의 앞에 내용 (content) 삽입
• E::after : E요소 내부의 뒤에 내용 (content) 삽입

속성 선택자 (Attribute Selectors)

html의 속성을 선택 (css의 속성은 property라고 한다.)

• [attr] : attr 속성인 값이 있으면 선택
• [attr = value] : attr 속성 값이 value인 요소 선택
• [attr* = value] : attr 속성 값에 value가 포함되어 있는 요소 선택 여러 개의 class명이 포함되어 있어도 사용 가능
• [attr^ = value] : attr 속성 값이 value로 시작하는 요소 선택
• [attr$ = value] : attr 속성 값이 value로 끝나는 요소 선택

상속

조상 요소의 속성을 지정 → 후손에도 적용됨 (대부분 글자를 다루는 속성!)

• font-size
• font-weight
• font-style
• line-height
• font-family
• color
• text-align
• text-indent
• text-decoration
• letter-spacing
• opacity
• etc

강제 상속

속성의 "값"에 inherit를 적용하면 "부모"에서 "자식"으로 강제 상속시킬 수 있다. 후손에는 적용 안됨, 모든 요소가  inherit를 사용할 수 있는 것은 아니다.

우선순위

같은 요소가 여러 선언 대상이 된 경우

1. 명시도 점수가 높은 것
2. 명시도 점수가 같을 경우에는 늦게 작성된 선언이 우선 됨
3. 명시도는 "상속" 규칙보다 우선 됨
4. !important는 다른 모든 대상보다 우선 됨

명시도 점수 계산

1. !important : ∞ pt
2. inline 선언 : 1,000pt
3. id 선택자 : 100pt
4. class 선택자 : 10pt
5. 태그 선택 : 1pt
6. 전체 선택 : 0pt
7. 상속은 계산하지 않는다.
8. 부정 선택자는 점수 없음