dt 및 관련 dd 요소를 선택하는 CSS 선택기가 있습니까?

StackOverflow https://stackoverflow.com/questions/1429483

  •  07-07-2019
  •  | 
  •  

문제

정의 목록은 일부 키워드가 하나 이상의 값과 연관된 정보를 마크업하는 좋은 방법입니다.

dt와 의미론적 연관이 있기 때문에 하나 이상 dd 요소에 대해 CSS를 사용하여 관련 항목을 선택하는 방법이 있습니까?

다음 HTML을 고려하십시오.

<dl>
  <dt>Foo</dt><dd>foo</dd>
  <dt>Bar</dt><dd>bar</dd>
  <dt>Baz</dt><dd>baz</dd>
</dl>

이 dl을 다음과 같이 표현하고 싶다면:

-------  -------  -------
| Foo |  | Bar |  | Baz |
| foo |  | bar |  | baz |
-------  -------  -------

dt/dd 쌍 번호 1이 왼쪽으로 떠 있고 테두리를 얻는 등의 방법이 필요합니다.

현재 내가 아는 유일한 방법은 각 dt/dd 요소 세트에 대해 별도의 dls를 만드는 것입니다.

<dl>
  <dt>Foo</dt><dd>foo</dd>
</dl>
<dl>
  <dt>Bar</dt><dd>bar</dd>
</dl>
<dl>
  <dt>Baz</dt><dd>baz</dd>
</dl>

의미론적 관점에서 보면 이러한 항목은 모두 하나의 목록에 포함됩니다.

그렇다면 dt/dd 요소 그룹에서 작업할 수 있는 선택기 또는 선택기 조합이 있습니까?

업데이트

내가 찾고/제안하는 것은 의사 요소와 같은 것입니다. list-item, 여기서 dl:list-item은 dt 그리고 관련된 모든 것 dd 요소를 하나의 항목으로, first-line 의사 요소를 사용하면 문자 그룹을 하나의 단위로 선택할 수 있습니다.

도움이 되었습니까?

해결책 2

이것은 Knittl의 답변에 대한 응답입니다. 의견에 KNITTL의 답변에 적절하게 응답 할 수있는 공간이나 능력은 없으며,이 응답은 질문에 대한 답변을 다루기 때문에 질문의 일부가 아닙니다. 그래서 나는 계속해서 답으로 게시 할 것입니다.

Knittl은 내가 찾고있는 것이 불가능하다고 말합니다. 나는 그것이 사실이라고 의심했지만 다양한 표준을 읽을 때 무언가를 놓칠 수있었습니다.

그러나 제공된 이유는 명백히 부정확합니다.

knittl Asserts :

아니요, a <dt> 여러 가지 가질 수 있습니다 <dd>S와 다른 방법으로.

그가 '아니오로 멈췄다면 정답이 아니었을 것입니다.

따라서 제안 된 그룹에 불확실한 수의 요소가 있기 때문에 불가능하다는 주장입니다.

이 주장은 DL의 어린이 인 DT 및 DD 요소 세트에 대한 관련 요소 세트를 생성하기위한 알고리즘을 제공하여 직접 반증 할 수 있습니다. 또한, 문서의 불확실한 부분에서 작동하는 기존 의사 요소의 카운터 예에 의해 반증 될 수있다.

관련 DT 및 DD 요소를 그룹화하는 의사 요소를 구현하는 논리는 어렵지 않습니다. 따라서 두 유형의 요소 수는 독일이 아닙니다.

주어진 DL 요소의 경우 :

  • 포함 할 수집 유형을 지정하십시오 dt 그리고 dd a라고 불리는 요소 dt_dd_group
  • 모음을 시작하십시오 dt_dd_groups 호출 all_groups
  • 각 어린이 요소 검사 (비 수수료) :
    • 요소가 dt 인 경우 :
      • 이것이 첫 번째 요소이거나 이전 요소가 dt:
        • 새로운 것을 만듭니다 dt_dd_group
        • 새로운 것을 추가하십시오 dt_dd_group 에게 all_groups
        • 요소를 추가하십시오 dt_dd_group
      • 그렇지 않으면 요소를 전류에 추가하십시오 dt_dd_group
    • 그렇지 않으면 요소가 DD 인 경우 :
      • 이것이 첫 번째 요소 인 경우 :
        • 새로운 것을 만듭니다 dt_dd_group
        • 새로운 것을 추가하십시오 dt_dd_group 에게 all_groups
        • 요소를 추가하십시오 dt_dd_group
      • 전류에 요소를 추가하십시오 dt_dd_group
  • 리턴 컬렉션 all_groups

이 알고리즘은 DL 내의 DT/DD 요소 세트를 관련 세트로 쉽게 분할합니다. 초기 DT 요소가 제공되지 않는 준수하지만 병리학 적 사례를 포함한 법적 DL의 경우 :

<dl><dd>foo</dd><dd>bar</dd><dl>

이러한 그룹의 불확실한 수 또는 DT 또는 DD 요소로 인해이 선택 모드가 불가능하다고 말하는 것은 허위 인 것으로 나타났습니다. 단락의 첫 번째 줄에있는 문자 수도 불확실하지만 :first-line 의사 요소는 CSS 표준의 일부입니다.

CSS 실무 그룹이 문제를 고려하지 않았거나 어떤 이유로이 문제를 고려하지 않았기 때문에 내가 찾고있는 선택 모드는 불가능하다고 말하는 것이 합리적입니다.

따라서 요약하면 의미 적으로 관련된 DT 및 DD 태그 그룹에서 작동하는 선택기는 이론적으로 가능합니다. 그러한 선택기는 구현되지 않았습니다.

다른 팁

아니요, a <dt> 여러 가지 가질 수 있습니다 <dd>S와 다른 방법으로.

그러나 아마도:

dt + dd {  }

귀하의 경우 충분합니다

일반 형제 결합자와 결합하여 ID를 사용하는 것은 어떻습니까?

    <html>
    <head>
          <style type="text/css">
                #id1 ~ DD { color: red; }
                #id2 ~ DD { color: blue; }
          </style>
    </head>
    <body>
        <dl>
        <dt id="id1">term 1</dt>
            <dd>def 1a</dd>
            <dd>def 1b</dd>

        <dt id="id2">term 2</dt>
            <dd>def 2a</dd>
            <dd>def 2b</dd>
        </dl>
    </body>
</html>​​​​​​​​​​​​​​​

이 바이올린을 확인해 보세요. 원하는 대로 작동하는 것 같습니다. http://jsfiddle.net/6qEHQ/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top