CSS 클래스 이름 / 선택기에 어떤 문자가 유효합니까?

CSS 클래스 선택기 에는 어떤 문자 / 기호가 허용 됩니까?
다음 문자는 유효하지 않지만 어떤 문자가 유효 합니까?

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

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

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

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

즉, 이전 규칙은 W3C 사양 에서 추출한 다음과 같습니다 . :

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

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

¹ 이스케이프 처리 된 유니 코드 문자 (아무도 사용하지 않는)를 포함 시켜서 조금 더 복잡해졌습니다.

² 연결된 문법에 따르면, 예를 들어 --indent1, 두 개의 하이픈으로 시작하는 규칙 이 유효하지 않습니다. 그러나 실제로 이것을 보았습니다.

놀랍게도 대부분의 대답은 잘못되었습니다. 그것은 밝혀졌습니다 :

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

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

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

HTML에 포함 할 수있는 방법이 없다는 것을 참고 공백 문자 (공백, 탭, 줄 바꿈, 폼 피드와 캐리지 리턴) A의 클래스 이름 속성을 서로 때문에 그들은 이미 별도의 클래스.

따라서 임의 문자열을 CSS 클래스 이름으로 변환해야하는 경우 : NUL 및 공백을 처리하고 (CSS 또는 HTML에 따라) 이스케이프하십시오. 끝난.

귀하의 질문에 깊이 답변했습니다 : 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>

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 준수 구문 분석기를 사용할 수 있어야합니다.

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

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

-?(?:[_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.

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

.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 :) */

또한 여러 클래스가있는 경우 선택기에서 클래스를 지정해야한다고 생각합니다.

출처 :

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

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

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

"... 2001 년 초에 발표 된 사양의 정오표는 처음으로 밑줄을 합법화했습니다."

위에 링크 된 기사는 절대로 사용하지 않는다고 말한 다음 지원하지 않는 브라우저 목록을 제공합니다.이 목록은 모두 사용자 수 측면에서 적어도 중복입니다.

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

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

[^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 : '';