클래스 이름의 대괄호는 무엇을 의미합니까?

클래스 이름의 대괄호는 무엇을 의미합니까?

---

여기서 클래스 이름에 사용되는 대괄호를 보았습니다 .

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

이 대괄호는 무엇을 의미합니까?

---

그것은 일종의 유효성 검사기 또는 유효성 검사 라이브러리에서 가장 많이 사용됩니다. 여기서 클래스는 validate키워드 로 표시된이 필드의 유효성을 검사 한 다음 다음을 의미합니다.

required필수 필드
custom유효성 검사 유형입니다. 문자
length는 0-100 자 사이 여야합니다.

이 정보는 링크 를 게시 한 jQuery 유효성 검사 라이브러리에서 사용됩니다. :)

---

대괄호는 특정 속성 값이있는 모든 요소를 ​​선택하기위한 속성 선택기로 사용됩니다. 즉, 속성 존재를 감지합니다.

예 1 :

img[alt="picName"] {width:100px;}

영향을 미칠 것입니다

<img src="picName.png" alt="picName" />

귀하의 코드에 영향을 미치지 않습니다

<img src="picName.png" alt="picName2" />

예 2 :

다음은 title 속성이 지정된 모든 요소에 영향을줍니다.

[title] {border:1px dotted #333;}

예 3 :

이 CSS

p[class~="fancy"]

다음 HTML에 영향을 미칩니다.

<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>

그러나 이것에는 영향을 미치지 않습니다.

<p class="fancy-fancy">Privet</p>

예 4 :

[lang|="en"]

다음과 같이 "en"으로 시작하는 단어의 하이픈으로 구분 된 목록 인 lang 속성이있는 요소에 영향을줍니다.

<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>

예 5, 6, 7 :(CSS3)

다음 속성 선택기는 href 속성 값이 문자열 "http :"로 시작하는 링크 요소에 영향을줍니다.

a[href^="http:"]

다음 속성 선택기는 src 속성 값이 문자열 ".png"로 끝나는 이미지 요소에 영향을줍니다.

img[src$=".png"]

다음 속성 선택기는 이름 속성 값에 문자열 "choice"가 포함 된 모든 입력 요소에 영향을줍니다.

input[name*="choice"]

---

OP가 클래스 이름의 대괄호에 대해 제공 한 사용 사례 / 예 외에도 Harry Roberts가 잠시 전에 그의 블로그에서 제안한 (그리고 나중에 제안을 중단 한) 또 다른 사용 사례가 있습니다. 마크 업 에서 관련 클래스 그룹화 괄호를 사용하여

HTML 파일을 스캔 할 때 쉽게 알아볼 수 있도록 두 개 이상의 관련 클래스 속성

...

다음과 같이 보입니다.

<div class="[ foo  foo--bar ]  baz">

어디:

• 클래스의 '세트'가 두 개 이상 있어야합니다.
• 하나의 '세트'는 둘 이상의 클래스를 포함해야합니다.

그는 또한 괄호를 추가하는 것이 html5 사양에 따라 완전히 유효하다고 언급했습니다.

작성자가 클래스 속성에서 사용할 수있는 토큰에는 […] 제한이 없습니다.

다시 말하면 :

The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS¹ - but rather to help readability in the HTML.

---

Notes:

¹ Although technically, they can be used when escaped,

.\[ {
  color: red;
}

<div class="[">Hi there</div>

---

Nothing. Brackets are a legal character for class names with no special meaning whatsoever.

---

In standard HTML, they have no particular meaning. It's just more text.

To the jQuery Validation plugin, they do.

---

There is no particular rule within a class name. In your example they are almost certainly being used by a JavaScript validation framework. This is because in HTML you can't simply add your own attributes to tags, therefore the validation framework is exploiting the fact that CSS class names can contain such characters in order to 'store' the validation rules within the class name. There won't actually be any corresponding class in the style-sheet - this is just a trick to work around the limitations of HTML.

ReferenceURL : https://stackoverflow.com/questions/3483391/what-do-square-brackets-in-class-names-mean