CSS 선택기 특이성 점수 계산 방법

CSS 선택기 특이성 계산기를 사용하는 이유

CSS 선택기의 특이성을 확인해야 할 때 선택자 텍스트를 입력하면 네 가지 구성 요소와 숫자 점수를 한 화면에서 살펴볼 수 있습니다. 스타일 규칙을 작성하거나 여러 규칙의 선택자 구조를 비교할 때, 어떤 종류의 선택자 토큰이 결과의 어느 부분에 반영되는지 확인하는 용도로 사용할 수 있습니다.

입력은 선택 사항입니다. 선택자 텍스트를 준비하지 않았거나 계산 기준을 먼저 확인하려는 경우에는 입력란을 비워 둔 상태로 결과를 볼 수 있습니다. 이때 빈 입력은 별도의 오류가 아니라 네 구성 요소와 숫자 점수가 0인 결과로 처리됩니다. 따라서 입력값을 넣은 결과와 입력하지 않은 결과를 구분해 살펴보는 것이 좋습니다.

이 도구가 보여 주는 결과는 입력한 선택자에서 감지된 토큰을 바탕으로 구성됩니다. ID 형태의 토큰, 클래스 형태의 토큰, 속성 선택자, 의사 클래스, 의사 요소, 요소 또는 타입 선택자가 서로 다른 구성 요소에 영향을 줍니다. 범용 선택자는 계산에 포함되지 않으므로, 선택자에 범용 선택자가 들어 있어도 그 부분만으로 점수가 올라가지는 않습니다.

처음 사용할 때는 복잡한 선택자보다 확인하려는 규칙에서 실제로 사용하는 짧은 선택자를 준비하면 결과를 읽기 쉽습니다. 입력한 텍스트가 결과의 선택자 표현에 어떻게 남는지도 함께 확인할 수 있으므로, 계산값뿐 아니라 제출한 내용과 표시된 결과의 대응 관계도 살펴볼 수 있습니다.

CSS 선택기 특이성 계산 절차

먼저 특이성을 확인할 CSS 선택자 텍스트를 정합니다. 한 규칙에 사용된 선택자를 그대로 준비하면 입력 내용과 결과를 대조하기 쉽습니다. 여러 선택자를 한꺼번에 판단하려 하기보다, 우선 하나를 입력해 네 구성 요소가 어떻게 표시되는지 확인합니다.
입력란에 선택자 텍스트를 입력합니다. 앞뒤에 공백이 있거나 입력 내용이 공백만으로 이루어진 경우에는 빈 입력으로 처리됩니다. 입력하지 않은 상태의 기준 결과가 필요하다면 입력란을 비워 둔 채 계산해도 됩니다.
계산을 실행하고 결과에서 네 개의 특이성 구성 요소와 숫자 점수를 찾습니다. 빈 입력이면 네 구성 요소가 모두 0이고 숫자 점수도 0입니다. 비어 있지 않은 입력이 성공적으로 계산되면 결과에 선택자 표현이 함께 표시되며, 제출한 선택자 텍스트가 보존됩니다.
첫 번째 구성 요소를 확인할 때는 ID 형태의 토큰이 감지되었는지 봅니다. ID만 있는 선택자에 해당하는 예에서는 구성 요소가 [1, 0, 0, 0] 형태로 표시됩니다. 이 값은 첫 번째 위치가 ID 형태의 토큰과 연결되어 있다는 점을 확인하는 기준으로 사용할 수 있습니다.
두 번째 구성 요소를 확인합니다. 클래스 형태의 토큰은 이 위치에 기여하며, 속성 선택자와 의사 클래스도 구현에서 감지되면 같은 구성 요소에 반영됩니다. 따라서 클래스 형태의 토큰만 있는 선택자와 속성 선택자 또는 의사 클래스가 포함된 선택자를 각각 입력하면 두 번째 위치의 변화를 비교할 수 있습니다.
세 번째 구성 요소에서는 의사 요소와 감지된 요소 또는 타입 선택자의 반영 여부를 살펴봅니다. 입력한 선택자에 이런 종류가 있다면 해당 위치의 값이 달라질 수 있습니다. 범용 선택자는 계산에서 제외되므로, 범용 선택자만 입력하거나 다른 토큰과 함께 입력한 경우에도 범용 선택자 자체에는 값을 배정하지 않습니다.
마지막으로 숫자 점수를 구성 요소와 대조합니다. 네 구성 요소에는 차례로 1000, 100, 10, 1의 가중치가 적용됩니다. 따라서 첫 번째 값은 1000, 두 번째 값은 100, 세 번째 값은 10, 네 번째 값은 1을 기준으로 숫자 점수에 반영됩니다. 입력한 선택자 표현이 제출한 텍스트와 같은지도 확인하면, 계산 대상과 표시된 결과가 서로 맞는지 함께 점검할 수 있습니다.
필요하면 선택자를 하나씩 바꾸어 같은 순서로 다시 확인합니다. 먼저 구성 요소를 읽고, 다음에 숫자 점수를 확인하며, 마지막에 선택자 표현을 입력 내용과 대조하면 토큰 종류와 점수의 관계를 놓치기 어렵습니다. 결과를 기록할 때는 숫자 점수만 옮기지 말고 네 구성 요소도 함께 적어 두는 편이 좋습니다.

결과 해석과 확인할 범위

결과는 네 개의 구성 요소를 왼쪽부터 읽는 방식으로 확인합니다. 첫 번째 값이 올라갔다면 ID 형태의 토큰이 영향을 주었는지 살펴봅니다. 두 번째 값은 클래스 형태의 토큰, 속성 선택자, 의사 클래스의 영향을 받을 수 있습니다. 세 번째 값은 의사 요소와 감지된 요소 또는 타입 선택자의 영향을 받을 수 있습니다. 네 번째 값과 관련된 해석은 결과에 표시된 구성 요소와 숫자 점수를 함께 대조하면서 판단해야 합니다.

숫자 점수는 구성 요소의 가중치를 합산한 값으로 읽습니다. 첫 번째 위치의 값이 바뀌면 1000 단위, 두 번째 위치의 값이 바뀌면 100 단위, 세 번째 위치의 값이 바뀌면 10 단위, 네 번째 위치의 값이 바뀌면 1 단위로 반영됩니다. 그러므로 숫자 점수만 보지 말고 어떤 위치의 값이 변했는지 먼저 확인하면 결과 차이의 원인을 더 구체적으로 추적할 수 있습니다.

예를 들어 클래스 형태의 토큰을 추가했는데 두 번째 구성 요소가 변했다면, 그 토큰이 두 번째 위치에 반영된 것으로 볼 수 있습니다. 속성 선택자나 의사 클래스를 추가했을 때도 같은 위치의 변화를 확인할 수 있습니다. 의사 요소 또는 감지된 타입 선택자를 추가한 경우에는 세 번째 위치를 확인합니다. 범용 선택자를 추가했는데 값이 달라지지 않았다면, 범용 선택자 제외 규칙과 일치하는 결과인지 살펴봅니다.

빈 결과는 입력 실패로 단정하지 않아야 합니다. 입력이 비어 있거나 공백만 포함되면 네 구성 요소와 숫자 점수가 0으로 표시되도록 동작하기 때문입니다. 반대로 비어 있지 않은 입력에서는 결과의 선택자 표현이 제출한 텍스트를 유지합니다. 표시된 표현이 기대한 입력과 다르게 보인다고 느껴질 때는 먼저 실제 입력이 비어 있었는지, 공백만 입력되었는지, 그리고 제출한 텍스트를 그대로 다시 확인합니다.

해석의 범위도 구분해야 합니다. 이 결과는 도구가 감지하는 선택자 규칙에 따라 계산된 값입니다. 특히 범용 선택자는 제외되며, 요소 또는 타입 선택자도 감지된 경우에만 세 번째 구성 요소에 반영됩니다. 복잡한 선택자를 검토할 때는 결과의 네 위치, 숫자 점수, 선택자 표현을 함께 확인하고, 특정 토큰이 어떤 방식으로 감지되었는지 결과만으로 신중하게 판단해야 합니다.

여러 선택자를 비교할 때는 같은 방식으로 각 결과를 기록합니다. 먼저 네 구성 요소를 나란히 놓고, 다음으로 숫자 점수를 비교하며, 마지막에 입력 텍스트가 보존되었는지 확인합니다. 이렇게 하면 숫자가 달라졌다는 사실뿐 아니라 어느 구성 요소의 차이가 숫자에 반영되었는지도 파악할 수 있습니다.

사용 예시

CSS 규칙 두 개의 선택자 특이성을 비교하려는 사람이 #main .card의 계산 결과를 확인합니다.

CSS 규칙의 선택자 구조를 확인하려는 사람이 입력란에 #main .card를 입력하고 계산을 실행합니다. 결과에서 네 구성 요소와 숫자 점수를 확인한 다음, 선택자 표현이 제출한 텍스트를 유지하는지 대조합니다.

결과에는 네 개의 특이성 구성 요소, 숫자 점수, 입력한 선택자 텍스트를 유지한 선택자 표현이 표시됩니다.

제한 사항

결과는 도구가 감지하는 선택자 규칙을 기준으로 하며 범용 선택자는 계산에서 제외됩니다. 복잡한 선택자는 네 구성 요소와 입력 텍스트를 함께 확인해 해석해야 합니다.

자주 발생하는 오류

선택자를 입력했다고 생각했지만 입력란이 비어 있거나 공백만 남아 있으면 네 구성 요소와 숫자 점수가 모두 0이 됩니다. 입력란의 공백을 확인하고, 확인하려는 선택자 텍스트를 다시 입력한 뒤 계산을 실행하세요.

자주 묻는 질문

선택자를 입력하지 않으면 어떻게 되나요?

입력란이 비어 있거나 공백만 있으면 네 가지 구성 요소가 모두 0이고 숫자 점수도 0으로 표시됩니다. 선택자 결과가 필요하면 비어 있지 않은 선택자 텍스트를 입력하세요.

범용 선택자도 특이성 점수에 포함되나요?

범용 선택자는 계산에 포함되지 않습니다. 다른 선택자 토큰과 함께 입력한 경우에는 범용 선택자 자체가 점수에 기여하지 않는다는 점을 고려해 결과의 구성 요소를 확인하세요.

입력한 선택자 텍스트가 결과에 남나요?

입력이 비어 있지 않다면 결과의 선택자 표현은 제출한 선택자 텍스트를 유지합니다. 표시된 표현과 입력한 텍스트를 대조해 보세요.