CSS 선택기-특정 요소와 형제가있는 부모 요소를 선택합니다.

B 퍼시벌

동일한 형식의 중첩 된 html 형식을 따르는 일련의 텍스트 영역이 있지만 구체적으로 대상을 지정해야합니다. 내가 가진 문제는 특정 텍스트 영역을 식별하는 데 사용할 수있는 고유 한 값이 부모의 형제 자매라는 것입니다.

이 HTML이 주어지면

<fieldset>
<legend class="name">
<a href="#" style="" id="element_5014156_showhide" title="Toggle “Standout List”">▼</a>
</legend>
<ul id="element_5014156" class="elements">
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<textarea name="container_prof|15192341" id="container_prof15192341">  TARGET TEXTAREA</textarea>
</div>
::after
</li>
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64">
</div>
::after
</li>
</ul>
</fieldset>

많은 <li>요소가 있습니다. 동적으로 생성 된 이름이나 ID를 사용할 수 없습니다.

TARGET TEXTAREA라는 텍스트 영역을 타겟팅하고 싶습니다. 내가 찾을 수있는 유일한 특이 사항은 <a>요소 내 요소 의 제목 속성입니다 .

구체적으로 legend.name a[title*='Standout']Chrome 콘솔에서 얻을 수 있습니다 .$$("legend.name a[title*='Standout']");

<legend>텍스트 영역 에서 요소까지 끝까지 탐색 할 수 있습니다.legend.name ~ ul.elements li.element div.content textarea

Chrome 콘솔에서 : $$("legend.name ~ ul.elements li.element div.content textarea")

그러면 class = name을 가진 형제 범례가있는 class = elements가있는 ul이있는 class = element가있는 li이있는 class = "content"가있는 div가있는 모든 텍스트 영역이 제공됩니다.

내가 알아낼 수있는 유일한 것은 class = name을 가진 범례가 제목에 'Standout'이있는 앵커를 가져야한다는 한정자를 추가하는 것입니다.

나는 시도 $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea")했지만 앵커가 인접 형제가 아니기 때문에 분명히 실패합니다.ul

어떤 도움을 주시면 감사하겠습니다!

Zaqx

내가 찾을 수있는 유일한 특이 사항은 요소 내 요소의 제목 속성입니다.

일반적으로 해당 텍스트는 화면 판독기 용으로 현지화되어야하므로 제목 속성의 텍스트에 스타일 규칙을 추가하지 않으려 고합니다.

나는 $$ ( "legend.name a [title * = 'Standout'] ~ ul.elements li.element div.content textarea") 시도했지만 앵커가 ul의 인접한 형제가 아니기 때문에 분명히 실패합니다.

당신이 요구하는 것은 현재 CSS로는 불가능합니다. : /

여기서 가장 좋은 해결책은 HTML을 생성하는 JavaScript (또는 다른 언어) 내에서 의미있는 속성이나 클래스를 HTML에 추가하는 것입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS 선택기로 특정 요소를 가져 오려고합니다.

분류에서Dev

css는 특정 클래스 조합과 일치하는 모든 요소를 선택합니다.

분류에서Dev

CSS는 특정 클래스 만 포함하는 요소를 선택합니다.

분류에서Dev

jquery css 선택기는 ID가있는 요소와 일치하는 마지막 점 뒤에 특정 텍스트를 포함합니다.

분류에서Dev

요소에 부모 컨테이너가 없을 때 특정 CSS 클래스로 마지막 요소를 선택하는 방법이 있습니까?

분류에서Dev

특정 요소 다음에 요소를 선택하기 위해 CSS 선택기를 사용하는 방법은 무엇입니까?

분류에서Dev

요소를 가리키면 CSS3 선택기를 사용하여 모든 형제 요소를 어떻게 선택할 수 있습니까?

분류에서Dev

요소 뒤에 특정 클래스가있는 첫 번째 형제를 선택합니다.

분류에서Dev

CSS는이 요소 다음에 동일한 유형의 모든 요소를 선택합니다.

분류에서Dev

CSS 2.0 선택기를 사용하여 부모에 설정된 속성으로 요소를 어떻게 선택할 수 있습니까?

분류에서Dev

특정 하위 요소 속성이있는 CSS 선택 요소

분류에서Dev

동일한 부모를 갖기 위해 요소가 필요하지 않은 일반 형제 선택자와 유사한 선택기가 있습니까?

분류에서Dev

특정 클래스가있는 div 내부의 요소를 제외한 모든 요소를 어떻게 선택할 수 있습니까?

분류에서Dev

JQuery 선택기에 대한 클래스의 모든 요소가 아닌 클래스의 일부인 특정 HTML 요소를 선택하는 방법

분류에서Dev

특정 유형의 자식이있는 부모 요소의 마지막 요소를 선택하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

XSLT / XPATH를 사용하여 특정 값을 가진 자식 요소가있는 요소를 선택합니다.

분류에서Dev

특정 클래스가있는 마지막 요소를 제외한 모든 요소 선택

분류에서Dev

내부에 특정 요소가없는 요소 선택

분류에서Dev

특정 텍스트가있는 요소를 포함하는 특정 클래스가있는 요소에 대한 CSS / Xpath 선택기

분류에서Dev

CSS는 새 요소에 대한 선택기를 만듭니다.

분류에서Dev

Scrapy는 선택기에서 CSS 유사 요소를 사용합니다.

분류에서Dev

특정 클래스를 제외한 모든 요소 선택

분류에서Dev

부모가 다른 CSS 선택기로 마지막으로 일치하는 요소를 얻으려면 어떻게해야합니까?

분류에서Dev

CSS는 모든 것을 선택하지만 특정 부모와 모든 자식을 무시합니다.

분류에서Dev

특정 유형의 요소를 선택할 수 없습니다.

분류에서Dev

CSS3 not selector를 사용하여 특정 요소의 하위 요소가 아닌 요소 만 선택

분류에서Dev

속성이 특정 값으로 설정된 요소 내의 모든 요소를 선택합니다.

분류에서Dev

Mongodb는 중첩 문서에서 특정 요소를 선택합니다.

분류에서Dev

부모가 다른 CSS 선택기로 첫 번째 일치 요소를 얻으려면 어떻게해야합니까?

Related 관련 기사

  1. 1

    CSS 선택기로 특정 요소를 가져 오려고합니다.

  2. 2

    css는 특정 클래스 조합과 일치하는 모든 요소를 선택합니다.

  3. 3

    CSS는 특정 클래스 만 포함하는 요소를 선택합니다.

  4. 4

    jquery css 선택기는 ID가있는 요소와 일치하는 마지막 점 뒤에 특정 텍스트를 포함합니다.

  5. 5

    요소에 부모 컨테이너가 없을 때 특정 CSS 클래스로 마지막 요소를 선택하는 방법이 있습니까?

  6. 6

    특정 요소 다음에 요소를 선택하기 위해 CSS 선택기를 사용하는 방법은 무엇입니까?

  7. 7

    요소를 가리키면 CSS3 선택기를 사용하여 모든 형제 요소를 어떻게 선택할 수 있습니까?

  8. 8

    요소 뒤에 특정 클래스가있는 첫 번째 형제를 선택합니다.

  9. 9

    CSS는이 요소 다음에 동일한 유형의 모든 요소를 선택합니다.

  10. 10

    CSS 2.0 선택기를 사용하여 부모에 설정된 속성으로 요소를 어떻게 선택할 수 있습니까?

  11. 11

    특정 하위 요소 속성이있는 CSS 선택 요소

  12. 12

    동일한 부모를 갖기 위해 요소가 필요하지 않은 일반 형제 선택자와 유사한 선택기가 있습니까?

  13. 13

    특정 클래스가있는 div 내부의 요소를 제외한 모든 요소를 어떻게 선택할 수 있습니까?

  14. 14

    JQuery 선택기에 대한 클래스의 모든 요소가 아닌 클래스의 일부인 특정 HTML 요소를 선택하는 방법

  15. 15

    특정 유형의 자식이있는 부모 요소의 마지막 요소를 선택하는 가장 좋은 방법은 무엇입니까?

  16. 16

    XSLT / XPATH를 사용하여 특정 값을 가진 자식 요소가있는 요소를 선택합니다.

  17. 17

    특정 클래스가있는 마지막 요소를 제외한 모든 요소 선택

  18. 18

    내부에 특정 요소가없는 요소 선택

  19. 19

    특정 텍스트가있는 요소를 포함하는 특정 클래스가있는 요소에 대한 CSS / Xpath 선택기

  20. 20

    CSS는 새 요소에 대한 선택기를 만듭니다.

  21. 21

    Scrapy는 선택기에서 CSS 유사 요소를 사용합니다.

  22. 22

    특정 클래스를 제외한 모든 요소 선택

  23. 23

    부모가 다른 CSS 선택기로 마지막으로 일치하는 요소를 얻으려면 어떻게해야합니까?

  24. 24

    CSS는 모든 것을 선택하지만 특정 부모와 모든 자식을 무시합니다.

  25. 25

    특정 유형의 요소를 선택할 수 없습니다.

  26. 26

    CSS3 not selector를 사용하여 특정 요소의 하위 요소가 아닌 요소 만 선택

  27. 27

    속성이 특정 값으로 설정된 요소 내의 모든 요소를 선택합니다.

  28. 28

    Mongodb는 중첩 문서에서 특정 요소를 선택합니다.

  29. 29

    부모가 다른 CSS 선택기로 첫 번째 일치 요소를 얻으려면 어떻게해야합니까?

뜨겁다태그

보관