CSS 클래스 이름/선택기에서 유효한 문자는 무엇입니까?

질문자 :Darryl Hein

CSS 클래스 선택기에서 허용되는 문자/기호는 무엇입니까?
다음 문자가 유효하지 않다는 것을 알고 있지만 어떤 문자가 유효 합니까?

 ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

CSS 문법 에서 직접 확인할 수 있습니다.

기본적으로 ¹ , 이름은 밑줄( _ ), 하이픈( - ) 또는 문자( a – z )로 시작하고 그 뒤에 하이픈, 밑줄, 문자 또는 숫자가 와야 합니다. 캐치가있다 : 첫 번째 문자는 하이픈 인 경우, 두 번째 문자 ^2는 문자 나 밑줄이어야하며, 이름이 긴 최소 2 자 이상이어야합니다.

 -?[_a-zA-Z]+[_a-zA-Z0-9-]*

간단히 말해서 이전 규칙은 W3C 사양 에서 추출한 다음과 같이 번역됩니다. :

CSS에서 식별자(선택기의 요소 이름, 클래스 및 ID 포함)는 문자 [a-z0-9] 및 ISO 10646 문자 U+00A0 이상, 하이픈(-) 및 밑줄(_)만 포함할 수 있습니다. ; 숫자로 시작하거나 하이픈과 숫자로 시작할 수 없습니다. 식별자는 이스케이프 문자와 ISO 10646 문자를 숫자 코드로 포함할 수도 있습니다(다음 항목 참조). 예를 들어 식별자 "B&W?" "흑백?"으로 쓸 수 있습니다. 또는 "B\26 W\3F".

하이픈이나 밑줄로 시작하는 식별자는 일반적으로 -moz-opacity 에서와 같이 브라우저별 확장을 위해 예약되어 있습니다.

¹ 이스케이프 처리된 유니코드 문자(아무도 실제로 사용하지 않는)를 포함함으로써 이 모든 것이 조금 더 복잡해졌습니다.

² 내가 링크한 문법에 따르면 두 개의 하이픈으로 시작하는 규칙(예: --indent1 )은 유효하지 않습니다. 그러나 나는 이것을 실제로 본 적이 있다고 확신합니다.

Triptych

놀랍게도 여기에 있는 대부분의 답변은 잘못되었습니다. 다음과 같이 밝혀졌습니다.

CSS의 CSS 클래스 이름에는 NUL을 제외한 모든 문자가 허용됩니다. (CSS에 NUL(이스케이프 처리 여부)이 포함되어 있으면 결과가 정의되지 않습니다. [ CSS-characters ])

Mathias Bynens의 답변 은 이러한 이름을 사용하는 방법을 보여주는 설명 및 데모 링크입니다. CSS 코드 로 작성된 클래스 이름은 이스케이프 처리가 필요할 수 있지만 클래스 이름은 변경되지 않습니다. 예를 들어 불필요하게 과도하게 이스케이프된 표현은 해당 이름의 다른 표현과 다르게 보이지만 여전히 동일한 클래스 이름을 참조합니다.

대부분의 다른 (프로그래밍) 언어에는 이스케이프 변수 이름("식별자")이라는 개념이 없으므로 변수의 모든 표현은 동일하게 보여야 합니다. CSS에서는 그렇지 않습니다.

HTML에서는 공백 문자(공백, 탭, 줄 바꿈, 양식 피드 및 캐리지 리턴) 를 클래스 이름 속성 에 포함할 수 없습니다. 왜냐하면 이미 클래스가 서로 분리되어 있기 때문입니다.

따라서 임의의 문자열을 CSS 클래스 이름으로 변환해야 하는 경우 NUL 및 공백을 처리하고 이스케이프(CSS 또는 HTML에 따라)를 처리합니다. 완료.

Robert Siemer

여기에서 귀하의 질문에 심층적으로 답변했습니다. http://mathiasbynens.be/notes/css-escapes

이 기사에서는 CSS(및 JavaScript)에서 문자를 이스케이프 처리하는 방법도 설명하며 이를 위한 편리한 도구도 만들었습니다. 해당 페이지에서:

~!@$%^&*()_+-=,./';:"?><[]{}|`# ID 값을 지정하면 선택기는 다음과 같이 표시됩니다.

CSS:

 <style> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { background: hotpink; } </style>

자바스크립트:

 <script> // document.getElementById or similar document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); // document.querySelector or similar $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); </script>

Mathias Bynens

W3C 사양을 읽으십시오. (이것은 CSS 2.1입니다. 브라우저 가정에 적합한 버전을 찾으십시오.)

편집: 관련 단락은 다음과 같습니다.

CSS에서 식별자(선택자의 요소 이름, 클래스 및 ID 포함)는 문자 [a-z0-9] 및 ISO 10646 문자 U+00A1 이상, 하이픈(-) 및 밑줄(_)만 포함할 수 있습니다. ; 숫자로 시작하거나 하이픈과 숫자로 시작할 수 없습니다. 식별자는 이스케이프 문자와 ISO 10646 문자를 숫자 코드로 포함할 수도 있습니다(다음 항목 참조). 예를 들어 식별자 "B&W?" "B\&W\?"로 쓸 수 있습니다. 또는 "B\26 W\3F".

편집 2: @mipadi가 Triptych의 답변에서 지적했듯이 동일한 웹 페이지에도 이 주의 사항이 있습니다.

CSS에서 식별자는 '-'(대시) 또는 '_'(밑줄)로 시작할 수 있습니다. '-' 또는 '_'로 시작하는 키워드 및 속성 이름은 공급업체별 확장을 위해 예약되어 있습니다. 이러한 공급업체별 확장은 다음 형식 중 하나여야 합니다.

 '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name

예:

예를 들어, XYZ 조직이 디스플레이 동쪽의 테두리 색상을 설명하는 속성을 추가한 경우 -xyz-border-east-color라고 부를 수 있습니다.

기타 알려진 예:

 -moz-box-sizing -moz-border-radius -wap-accesskey

초기 대시 또는 밑줄은 현재 또는 미래의 CSS 수준에서 속성이나 키워드에 사용되지 않도록 보장됩니다. 따라서 일반적인 CSS 구현은 이러한 속성을 인식하지 못하고 구문 분석 오류 처리 규칙에 따라 무시할 수 있습니다. 그러나 초기 대시 또는 밑줄이 문법의 일부이기 때문에 CSS 2.1 구현자는 공급업체별 확장을 지원하는지 여부에 관계없이 항상 CSS 준수 파서를 사용할 수 있어야 합니다.

작성자는 공급업체별 확장을 피해야 합니다.

Jason S

완전한 정규식은 다음과 같습니다.

 -?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

- " 및 " _ "를 제외한 나열된 모든 문자는 직접 사용하는 경우 허용되지 않습니다. foo\~bar 사용하거나 유니코드 표기법 foo\7E bar 사용하여 인코딩할 수 있습니다.

Gumbo

해결 방법을 찾는 사람들을 위해 예를 들어 클래스가 숫자로 시작하는 경우 속성 선택기를 사용할 수 있습니다. 변화:

 .000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

이에:

 [class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

또한 여러 클래스가 있는 경우 선택기에서 지정하거나 ~= 연산자를 사용해야 합니다.

 [class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}

출처:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. 숫자로 시작하는 이름을 가진 CSS 클래스를 유효하게 만드는 해결 방법이 있습니까?
3. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

D.Tate

내 이해는 밑줄이 기술적으로 유효하다는 것입니다. 체크 아웃:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...2001년 초에 발표된 사양에 대한 정오표로 밑줄이 처음으로 합법화되었습니다."

위에 링크된 기사에서는 절대 사용하지 말라고 말한 다음, 이를 지원하지 않는 브라우저 목록을 제공합니다. 이 모든 브라우저는 최소한 사용자 수 측면에서 보면 장기간 중복됩니다.

mofaha

HTML5/CSS3의 경우 클래스 및 ID는 숫자로 시작할 수 있습니다.

Marius

모든 문자를 클래스 이름으로 사용할 수 있습니다. # 및 . \ 로 이스케이프하면 됩니다.

 .test\.123 { color: red; } .test\#123 { color: blue; } .test\@123 { color: green; } .test\<123 { color: brown; } .test\`123 { color: purple; } .test\~123 { color: tomato; }

 <div class="test.123">test.123</div> <div class="test#123">test#123</div> <div class="test@123">test@123</div> <div class="test<123">test<123</div> <div class="test`123">test`123</div> <div class="test~123">test~123</div>

doğukan

@Triptych의 답변에서 벗어나 다음 2개의 정규식 일치를 사용하여 문자열을 유효하게 만들 수 있습니다.

 [^a-z0-9A-Z_-]

이것은 쉽게 제거할 수 있도록 문자, 숫자, 대시 또는 밑줄이 아닌 모든 항목을 선택하는 역 일치입니다.

 ^-*[0-9]+

이것은 쉽게 제거할 수 있도록 문자열 시작 부분에 0 또는 1개의 대시 다음에 1개 이상의 숫자가 오는 것과 일치합니다.

PHP에서 사용하는 방법:

 //Make alphanumeric with dashes and underscores (removes all other characters) $class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class); //Classes only begin with an underscore or letter $class = preg_replace("/^-*[0-9]+/", "", $class); //Make sure the string is 2 or more characters long return 2 <= strlen($class) ? $class : '';

Manny Fleurmond

출처 : http:www.stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors