브라우저가 CSS 선택자를 해석하여 해당하는 요소를 찾는 순서

1. 선택자 해석 : 브라우저는 CSS 선택자를 해석하여 해당하는 요소를 찾기 위한 규칙을 생성한다. 선택자는 오른쪽에서 왼쪽으로 해석되며, 일치하는 요소를 찾기 위해 계층 구조를 따라 이동한다.
2. 요소 매칭 : 브라우저는 계층 구조를 따라 이동하면서 선택자의 각 부분과 일치하는 요소를 찾는다. 여기에서 일치하는 요소는 적용 대상이 될 수 있다.
3. 스타일 적용 : 일치하는 요소에 대해 선택자에 명시된 스타일 규칙을 적용한다. 이는 요소의 스타일을 변경하거나 추가하는 과정.

성능 향상을 위해 CSS 선택자를 작성하는 방법

• 구체성 최소화
  - 가능한 구체적이고 간결한 선택자를 작성하면 브라우저가 더빠르게 일치하는 요소를 찾을 수 있다.
  - 가능한 많은 계층을 건너뛰지 않고 직접 명시적인 선택자를 사용하는 것이 좋다.
  
• 전체 문서 범위 대신 지역 범위 선택자 사용
  - 전체 문서 범위('*')나 태그 이름('div', 'span' 등)을 사용하는 것보다 클래스나 ID와 같이 지역 범위의 선택자를 사용하는 것이 성능면에서 더 좋다.
• 최적화된 선택자 사용
  - CSS 선택자의 최적화된 사용법을 익히고, 일치하는 요소를 더 빠르게 찾을 수 있는 방법을 고려해야 한다.

🍅 최적화된 선택자 사용 방법

• ID 선택자 사용: ID 선택자는 요소를 고유하게 식별하는 데 사용된다. ID는 문서 내에서 고유해야 하므로, ID 선택자를 사용하면 브라우저가 빠르게 해당 요소를 찾을 수 있다.

• 클래스 선택자 조합 최적화: 클래스 선택자를 조합하여 더 구체적인 선택자를 만들 수 있다. 예를 들어, 클래스 선택자를 더 많이 사용하여 특정 요소를 좀 더 정확하게 선택하는 방법을 고려할 수 있다.

• 가장 가까운 공통 조상 활용: 선택자의 범위를 좁히기 위해 요소와 선택자 사이에 가장 가까운 공통 조상을 사용할 수 있다. 이렇게 하면 브라우저가 탐색해야 하는 범위가 줄어들어 더 빠른 선택이 가능해진다.

• 스타일 속성 사용: 요소의 스타일 속성을 직접 사용하여 선택하는 방법도 고려할 수 있다. 예를 들어, style 속성을 이용하여 특정 스타일 값을 가진 요소를 선택하는 방법이다.

+) 추가

.elic div span .target {
  /* some css */
}

css 선택자는 오른쪽부터 왼쪽으로 해석된다.
가장 오른쪽의 .target 클래스를 가지고 있는 요소를 찾는다. 그 다음 그 부모 요소, 그 다음 부모 요소, 그리고 .elice 클래스를 가지고 있는 요소를 차례로 찾아나간다.