Czy istnieje selektor CSS dla elementów zawierających określony tekst?

Wygląda na to, że myśleli o tym dla specyfikacji CSS3 , ale nie udało się go wyciąć .

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

Using jQuery:

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

Musisz dodać atrybut data do wierszy o nazwie data-gender z wartością male lub female i użyć selektora atrybutów:

HTML:

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

CSS:

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

Istnieje bardzo konceptualna podstawa, dlaczego nie zostało to zaimplementowane. Jest to kombinacja zasadniczo 3 aspektów:

1. zawartość tekstowa elementu jest w rzeczywistości potomkiem tego elementu
2. nie można bezpośrednio kierować zawartości tekstu
3. CSS nie pozwala na ascendencję z selektorami

Te 3 razem oznaczają, że do czasu, gdy masz treść tekstu, nie możesz wrócić do elementu zawierającego, i nie możesz stylować teraźniejszości tekst. Jest to prawdopodobnie znaczące, ponieważ malejące pozwala tylko na pojedyncze śledzenie kontekstu i parsowania stylu saksofonu. Rosnąco lub inne selektory obejmujące inne osie wprowadzają potrzebę bardziej złożonych rozwiązań przesuwnych lub podobnych, które znacznie skomplikowałyby zastosowanie CSS do DOM.

Możesz ustawić zawartość jako atrybut danych, a następnie użyć selektorów atrybutów , Jak pokazano tutaj:

/* 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-content="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

Możesz również użyć jQuery, aby łatwo ustawić atrybuty data-content:

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

Ponieważ CSS nie ma tej funkcji, będziesz musiał użyć JavaScript do stylizacji komórek według zawartości. Na przykład z XPath ' s contains:

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

Następnie użyj wyniku tak:

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

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

Obawiam się, że nie jest to możliwe, ponieważ treść nie jest atrybutem ani nie jest dostępna przez pseudo klasę. Pełna lista selektorów CSS3 znajduje się w specyfikacji CSS3.

Dla tych, którzy chcą dokonać selekcji tekstu CSS Selenium, ten skrypt może być przydatny.

Sztuczka polega na wybraniu rodzica elementu, którego szukasz, a następnie wyszukaniu dziecka, które ma tekst:

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];
}

Zwróci pierwszy element, jeśli jest więcej niż jeden, ponieważ zawsze jest to jeden element, w moim przypadku.

Zgadzam się atrybut danych (odpowiedź Voyagera) jest taki, jak powinien być obsługiwany, ale reguły CSS takie jak:

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

Często może być znacznie łatwiejsze do skonfigurowania, zwłaszcza z bibliotekami po stronie klienta, takimi jak angularjs, które mogą być tak proste, jak:

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

Upewnij się, że treść jest tylko jednym słowem! Możesz też mapować do różnych nazw klas CSS za pomocą:

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

Dla kompletności, oto podejście atrybutów danych:

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

Jeśli nie tworzysz DOM samodzielnie (np. w userscripcie), możesz wykonać następujące czynności z czystym 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>

Wyjście konsoli

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

@ odpowiedź Voyagera na temat używania atrybutu data-* (np. data-gender="female|male" jest najskuteczniejszym i zgodnym ze standardami podejściem od 2017 roku:

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

Prawie większość celów może zostać osiągnięta, ponieważ istnieją pewne, choć ograniczone selektory zorientowane wokół tekstu. ::first-letter jest pseudo-elementem , który może stosować Ograniczony styl do pierwszej litery elementu. Istnieje również ::first-line pseudo-element poza oczywiście zaznaczeniem pierwsza linia elementu (takiego jak akapit) oznacza również, że jest oczywiste, że CSS może być użyty do rozszerzenia tej istniejącej możliwości do stylowania określonych aspektów kodu tekstowego.

Dopóki takie poparcie nie powiedzie się i zostanie wdrożone, następną najlepszą rzeczą, jaką mogę zasugerować, gdy ma to zastosowanie, jest explode/split słowa za pomocą deliminatora spacji, wypisuje każde pojedyncze słowo wewnątrz elementu span, a następnie, jeśli wyraz/cel stylizacji jest przewidywalny, użyj w połączeniu z : nth selektory :

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

Else jeśli nie jest przewidywalne , aby ponownie użyć odpowiedzi Voyagera o użyciu atrybutu data-*. Przykład użycia PHP:

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

Jeśli używasz szympans / Webdriver.io, obsługują znacznie więcej selektorów CSS niż specyfikacja CSS.

To, na przykład, kliknie na pierwszą kotwicę, która zawiera słowa "zły niedźwiedź":

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

Większość odpowiedzi stara się zaoferować alternatywę dla tego, jak napisać kod HTML, aby zawierał więcej danych, ponieważ przynajmniej do CSS3 nie można wybrać elementu za pomocą częściowego tekstu wewnętrznego. Ale można to zrobić, wystarczy dodać trochę waniliowego JavaScript, zauważ, że kobieta zawiera również samca zostanie wybrana:

      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>

Uważam, że opcja atrybutu jest najlepsza, jeśli nie chcesz używać javascript lub jquery.

Np. aby stylizować wszystkie komórki tabeli ze słowem gotowe, w HTML zrób to:

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

Następnie w css:

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

Możesz również użyć content z attr() i style komórek tabeli, które są :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 jest używany do zmiany koloru i może być dodany za pomocą JavaScript vanilla:

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

Chociaż znacznik <td>s end może być pominięty może to spowodować, że będzie traktowany jako niepusty.

[1]} od stycznia 2021 roku, jest coś, co zrobi właśnie to. : has ()... tylko jeden haczyk: nie jest to jeszcze obsługiwane w żadnej przeglądarce

Przykład: poniższy selektor dopasowuje tylko elementy, które bezpośrednio zawierają potomek:

a:has(> img)

Robienie małych widżetów filtrujących w ten sposób:

    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')
            }
        })
    })

Składnia tego pytania wygląda jak składnia Robot Framework. W tym przypadku, chociaż nie ma selektora css, którego można użyć do contains, istnieje słowo kluczowe SeleniumLibrary, które można użyć zamiast tego. Poczekaj, Aż Element Zawiera .

Przykład:

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