[css] 클래스 접두사별로 CSS 선택기가 있습니까?

Program / 글쓴이

클래스 중 하나가 지정된 접두사와 일치하는 모든 요소에 CSS 규칙을 적용하고 싶습니다.

예를 들어 status-(A와 C로 시작 하지만 다음 스 니펫에서 B가 아닌) 클래스가있는 div에 적용되는 규칙을 원합니다 .

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

일종의 조합 :
div[class|=status]및div[class~=status-]

CSS 2.1에서 가능합니까? 모든 CSS 사양에서 가능합니까?

참고 : jQuery를 사용하여 에뮬레이션 할 수 있다는 것을 알고 있습니다.

답변

그것은 CSS2.1으로 행할은 아니지만, (CSS3 속성 스트링 매칭 셀렉터 수 있다 IE7 + 지원)

div[class^="status-"], div[class*=" status-"]

두 번째 속성 선택기에서 공백 문자를 확인하십시오. 속성이 다음 조건 중 하나를 충족 하는 div요소를 선택합니다 class.

  • [class^="status-"] — “status-“로 시작

  • [class*=" status-"]— 공백 문자 바로 다음에 나오는 하위 문자열 “status-“를 포함합니다. 클래스 이름은 HTML 사양 에 따라 공백으로 구분 되므로 중요한 공백 문자입니다. 여러 클래스를 지정하는 경우에는 제 후에이 검사 다른 클래스 와 경우에는 속성 값을 제 클래스를 검사 보너스 추가 공간이 패딩 (출력 그 일부 애플리케이션에서 발생할 수있다 class동적 특성).

당연히 이것은 여기 에서 설명한 것처럼 jQuery에서도 작동 합니다 .

위에서 설명한대로 두 개의 속성 선택기를 결합해야하는 이유 [class*="status-"]는 다음과 같은 속성 선택기 가 다음 요소와 일치하기 때문에 바람직하지 않습니다.

<div id='D' class='foo-class foo-status-bar bar-class'></div>

그러한 시나리오가 발생 하지 않도록 보장 할 수 있다면 단순성을 위해 이러한 선택기를 자유롭게 사용할 수 있습니다. 그러나 위의 조합은 훨씬 강력합니다.

HTML 소스 또는 마크 업을 생성하는 응용 프로그램을 제어 할 수있는 경우 Gumbo가 제안한대로status- 접두어를 자체 status클래스로 만드는 것이 더 간단 할 수 있습니다 .

답변

CSS 속성 선택기를 사용하면 문자열의 속성을 확인할 수 있습니다. (이 경우-클래스 이름)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(2.1 및 3의 경우 실제로 ‘추천’상태 인 것 같습니다)

작동 방식에 대한 개요는 다음과 같습니다.

  • [ ]: 복잡한 선택기의 컨테이너 입니다.
  • class: ‘class’는 이 경우보고 있는 속성 입니다.
  • * : 수정 자 (있는 경우) :이 경우 “와일드 카드”는 일치하는 항목을 찾고 있음을 나타냅니다.
  • test- : 속성의 값 (있는 경우)-문자열 “test-“를 포함하는 값

예를 들어,

[class*='test-'] {
  color: red;
}

당신은 요소와 함께, 정당한 이유가 있다면 더 구체적 일 수 있습니다

ul[class*='test-'] > li { ... }

나는 엣지 케이스를 찾으려고 노력했지만 ^and는 *-를 모두 사용할 필요가 없습니다 .

예 : http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6 이상의 모든 것은 행복하게 순종 할 것입니다. 🙂

참고 :

[class] { ... }

수업으로 무엇이든 선택합니다 …

답변

CSS 선택기에서는 불가능합니다. 그러나 status-important 대신 status 와 important 등 두 개의 클래스를 하나 대신 사용할 수 있습니다 .

답변

당신은 이것을 할 수 없습니다. -기호까지 정확하게 또는 부분적으로 일치하는 하나의 속성 선택기 가 있지만 여러 속성이 있으므로 여기서 작동하지 않습니다. 찾고있는 클래스 이름이 항상 첫 번째라면 다음과 같이하십시오.

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

이것은 어떤 CSS 속성 선택자가 가장 가까운지를 지적하기 위해, 자바 스크립트가 속성을 조작 할 수 있기 때문에 클래스 이름이 항상 앞에 있다고 가정하지 않는 것이 좋습니다.

답변