특정 텍스트를 포함하는 요소에 대한 CSS 선택기가 있습니까?

다음 표에 대한 CSS 선택기를 찾고 있습니다.

Peter    | male    | 34
Susanne  | female  | 12

"male"을 포함하는 모든 TD와 일치하는 선택기가 있습니까?

사양을 올바르게 읽으면 아니요.

요소, 요소의 속성 이름 및 요소의 명명 된 속성 값을 일치시킬 수 있습니다. 그래도 요소 내에서 일치하는 콘텐츠에 대한 내용은 없습니다.

jQuery 사용하기 :

$('td:contains("male")')

CSS3 사양에 대해 생각하고있는 것처럼 보이지만 잘랐습니다 .

:contains()CSS3 선택기 http://www.w3.org/TR/css3-selectors/#content-selectors

당신은 호출 된 행에 데이터 속성을 추가해야 할 것 data-gender로모그래퍼 male또는 female값과 속성 선택기를 사용합니다 :

HTML :

<td data-gender="male">...</td>

CSS :

td[data-gender="male"] { ... }

실제로 이것이 구현되지 않은 이유는 매우 개념적입니다. 기본적으로 3 가지 측면의 조합입니다.

1. 요소의 텍스트 내용은 사실상 해당 요소의 자식입니다.
2. 텍스트 콘텐츠를 직접 타겟팅 할 수 없습니다
3. CSS는 선택기로 승천 할 수 없습니다

이 3은 텍스트 내용이있을 때 포함 요소로 다시 올라갈 수 없으며 현재 텍스트의 스타일을 지정할 수 없음을 의미합니다. 내림차순은 컨텍스트 및 SAX 스타일 구문 분석의 단일 추적 만 허용하므로 중요합니다. 다른 축을 포함하는 오름차순 또는 기타 선택기에서는 CSS를 DOM에 적용하는 것을 크게 복잡하게하는보다 복잡한 순회 또는 유사한 솔루션이 필요합니다.

다음과 같이 컨텐츠를 데이터 속성으로 설정 한 다음 속성 선택기 를 사용할 수 있습니다.

/* Select every cell containing word "male" */
td[data-content="male"] {
  color: red;
}

/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
  color: blue;
}

/* Select every cell containing "4" */
td[data-content*="4"] {
  color: green;
}

<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-conten="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

jQuery를 사용하여 데이터 컨텐츠 속성을 쉽게 설정할 수도 있습니다.

$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});

CSS에는이 기능이 없기 때문에 내용별로 셀 스타일을 지정하려면 JavaScript를 사용해야합니다. 예를 들어 XPath의 경우 contains:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

그런 다음 결과를 다음과 같이 사용하십시오.

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

내용이 속성이 아니거나 의사 클래스를 통해 액세스 할 수 없기 때문에 이것이 불가능하다는 것을 두려워합니다. CSS3 선택기의 전체 목록은 CSS3 사양 에서 찾을 수 있습니다 .

Selenium CSS 텍스트 선택을 원하는 사람들에게는이 스크립트가 유용 할 수 있습니다.

트릭은 찾고자하는 요소의 부모를 선택한 다음 텍스트가있는 자식을 검색하는 것입니다.

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

내 경우에는 항상 하나의 요소이므로 둘 이상의 요소가 있으면 첫 번째 요소를 반환합니다.

나는 데이터 속성 (voyager의 대답)이 어떻게 처리되어야하는지, 그러나 CSS 규칙은 다음과 같습니다.

td.male { color: blue; }
td.female { color: pink; }

특히 다음과 같이 간단 할 수있는 angularjs와 같은 클라이언트 측 라이브러리를 사용하여 설정하기가 훨씬 쉽습니다.

<td class="{{person.gender}}">

내용이 단지 한 단어인지 확인하십시오! 또는 다음을 사용하여 다른 CSS 클래스 이름으로 매핑 할 수도 있습니다.

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

완전성을 위해 다음은 데이터 속성 접근 방식입니다.

<td data-gender="{{person.gender}}">

data-*속성 사용에 대한 @voyager의 답변 (예 : 2017 년 data-gender="female|male"가장 효과적이고 표준을 준수하는 접근 방식입니다.

[data-gender='male'] {background-color: #000; color: #ccc;}

텍스트를 중심으로 한 제한된 선택기가 있지만 거의 대부분의 목표를 달성 할 수 있습니다. :: 첫 번째 문자는 A는 의사 요소 요소의 첫 글자로 제한 스타일을 적용 할 수 있습니다. 도있다 : 첫째 줄 또한 CSS는 textNode의 스타일의 특정 측면이 기존의 기능을 확장하는 데 사용할 수있는 것은 분명하다 것을 의미한다 분명히 (예 : 단락으로) 요소의 첫 번째 행을 선택 외에 의사 요소는 .

이러한 옹호가 성공 하고 적용 될 때까지 스페이스 델리 미네 이터를 사용하여 explode/ split단어에 적용 할 때 제안 할 수있는 다음 가장 좋은 것은 span요소 내부의 각 개별 단어를 출력 한 다음 단어 / 스타일 목표 를 예측 가능한 경우 : n 번째 선택기 와 함께 사용하는 경우 :

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span>'.$value1.'</span>;
}

그렇지 않으면 다시 예측할 수 없다면data-* 속성 사용에 대한 보이저의 대답을 사용하십시오 . PHP를 사용한 예 :

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}

Chimp / Webdriver.io를 사용 하는 경우 CSS 사양보다 훨씬 많은 CSS 선택기 를 지원합니다 .

예를 들어, "Bad bear"이라는 단어가 포함 된 첫 번째 앵커를 클릭합니다.

browser.click("a*=Bad Bear");

여기에있는 대부분의 답변은 적어도 CSS3까지 부분 내부 텍스트로 요소를 선택할 수 없기 때문에 더 많은 데이터를 포함하도록 HTML 코드를 작성하는 방법에 대한 대안을 제공하려고합니다. 그러나 수행 할 수 있습니다. 바닐라 JavaScript를 조금 추가하면됩니다. 여성에게는 남성이 포함되어 있기 때문에 선택됩니다.

      cells = document.querySelectorAll('td');
    	console.log(cells);
      [].forEach.call(cells, function (el) {
    	if(el.innerText.indexOf("male") !== -1){
    	//el.click(); click or any other option
    	console.log(el)
    	}
    });

 <table>
      <tr>
        <td>Peter</td>
        <td>male</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Susanne</td>
        <td>female</td>
        <td>14</td>
      </tr>
    </table>

<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-conten="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

javascript 또는 jquery를 사용하지 않으려는 경우 속성 옵션이 가장 좋은 방법입니다.

예를 들어 ready라는 단어로 모든 표 셀의 스타일을 지정하려면 HTML에서 다음을 수행하십시오.

 <td status*="ready">Ready</td>

그런 다음 CSS에서 :

td[status*="ready"] {
        color: red;
    }

당신은 또한 사용할 수 content와 함께 attr()있는 스타일의 테이블 셀 ::not :empty

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

<table>
  <tr>
    <th data-value="Peter"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="34"></td>
  </tr>
  <tr>
    <th data-value="Susanne"></th>
    <td data-value="female"></td>
    <td data-value="12"></td>
  </tr>
  <tr>
    <th data-value="Lucas"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="41"></td>
  </tr>
</table>

A ZeroWidthSpace는 색상을 변경하는 데 사용되며 바닐라 JavaScript를 사용하여 추가 할 수 있습니다.

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

비록 <td>의 종료 태그가 생략 될 수있다 하고 있으므로이 비어로 처리되게된다.

DOM을 직접 만들지 않으면 (예 : 사용자 스크립트에서) 순수 JS로 다음을 수행 할 수 있습니다.

for ( td of document.querySelectorAll('td') ) {
  console.debug("text:", td, td.innerText)
  td.setAttribute('text', td.innerText)
}
for ( td of document.querySelectorAll('td[text="male"]') )
  console.debug("male:", td, td.innerText)

<table>
  <tr>
    <td>Peter</td>
    <td>male</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Susanne</td>
    <td>female</td>
    <td>12</td>
  </tr>
</table>

콘솔 출력

text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male

다음과 같이 작은 필터 위젯 만들기 :

    var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
    var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')

    searchField.addEventListener('keyup', function (evt) {
        var testValue = evt.target.value.toLocaleLowerCase();
        var regExp = RegExp(testValue);

        faqEntries.forEach(function (entry) {
            var text = entry.textContent.toLocaleLowerCase();

            entry.classList.remove('show', 'hide');

            if (regExp.test(text)) {
                entry.classList.add('show')
            } else {
                entry.classList.add('hide')
            }
        })
    })

이 질문의 구문은 Robot Framework 구문과 비슷합니다. 이 경우, 사용할 수있는 CSS 선택기가 없지만 contains 대신 SeleniumLibrary 키워드가 있습니다. 요소까지 기다립니다 들어 있습니다 .

예:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male