Apakah ada pemilih CSS untuk elemen yang mengandung teks tertentu?

Saya mencari pemilih CSS untuk tabel berikut:

Peter    | male    | 34
Susanne  | female  | 12

Apakah ada pemilih yang cocok dengan semua TD yang mengandung "laki-laki"?

Jika saya membaca spesifikasi dengan benar, tidak.

Anda bisa mencocokkan pada suatu elemen, nama atribut dalam elemen, dan nilai atribut bernama dalam suatu elemen. Saya tidak melihat apa pun untuk mencocokkan konten dalam suatu elemen.

Menggunakan jQuery:

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

Sepertinya mereka memikirkannya untuk spesifikasi CSS3 tetapi tidak berhasil .

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

Anda harus menambahkan atribut data ke baris yang disebut data-genderdengan maleatau femalenilai dan menggunakan pemilih atribut:

HTML:

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

CSS:

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

Sebenarnya ada dasar yang sangat konseptual mengapa ini belum dilaksanakan. Ini pada dasarnya adalah kombinasi dari 3 aspek:

1. Isi teks suatu elemen secara efektif adalah anak dari elemen itu
2. Anda tidak dapat menargetkan konten teks secara langsung
3. CSS tidak memungkinkan untuk kenaikan dengan penyeleksi

Ketiga ini secara bersamaan berarti bahwa pada saat Anda memiliki konten teks, Anda tidak dapat naik kembali ke elemen yang mengandung, dan Anda tidak dapat menata teks saat ini. Ini mungkin signifikan karena turun hanya memungkinkan untuk pelacakan konteks tunggal dan penguraian gaya SAX. Ascending atau penyeleksi lain yang melibatkan sumbu lain memperkenalkan perlunya solusi traversal yang lebih kompleks atau serupa yang akan sangat mempersulit penerapan CSS ke DOM.

Anda bisa mengatur konten sebagai atribut data dan kemudian menggunakan pemilih atribut , seperti yang ditunjukkan di sini:

/* 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>

Anda juga dapat menggunakan jQuery untuk dengan mudah mengatur atribut data-konten:

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

Karena CSS tidak memiliki fitur ini, Anda harus menggunakan JavaScript untuk menata sel berdasarkan konten. Misalnya dengan XPath contains:

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

Kemudian gunakan hasilnya seperti ini:

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

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

Saya khawatir ini tidak mungkin, karena kontennya bukan atribut dan tidak dapat diakses melalui kelas semu. Daftar lengkap pemilih CSS3 dapat ditemukan dalam spesifikasi CSS3 .

Bagi mereka yang ingin melakukan pemilihan teks Selenium CSS, skrip ini mungkin bermanfaat.

Caranya adalah dengan memilih induk dari elemen yang Anda cari, dan kemudian mencari anak yang memiliki teks:

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

Ini akan mengembalikan elemen pertama jika ada lebih dari satu karena selalu satu elemen, dalam kasus saya.

Saya setuju bahwa atribut data (jawaban voyager) adalah bagaimana penanganannya, TETAPI, aturan CSS seperti:

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

seringkali dapat menjadi lebih mudah untuk diatur, terutama dengan lib sisi klien seperti angular yang dapat sesederhana:

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

Pastikan bahwa kontennya hanya satu kata! Atau Anda bahkan dapat memetakan ke berbagai nama kelas CSS dengan:

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

Untuk kelengkapan, inilah pendekatan atribut data:

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

Jawaban @ voyager tentang penggunaan data-*atribut (mis. data-gender="female|male"adalah pendekatan yang paling efektif dan standar pada 2017:

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

Hampir semua tujuan dapat dicapai karena ada beberapa penyeleksi terbatas meskipun berorientasi pada teks. Huruf :: pertama adalah elemen pseudo yang dapat menerapkan gaya terbatas pada huruf pertama elemen. Ada juga elemen :: pseudo-baris pertama selain jelas memilih baris pertama dari suatu elemen (seperti paragraf) juga menyiratkan bahwa jelas bahwa CSS dapat digunakan untuk memperluas kemampuan yang ada ini untuk merancang aspek-aspek spesifik dari textNode. .

Sampai advokasi tersebut berhasil dan diimplementasikan, hal terbaik berikutnya yang dapat saya sarankan ketika dapat diterapkan adalah untuk explode/ splitkata-kata menggunakan pembatas ruang, output setiap kata individu di dalam suatu spanelemen dan kemudian jika tujuan kata / styling dapat diprediksi digunakan dalam kombinasi dengan : n penyeleksi :

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

Lain jika tidak dapat diprediksi , lagi, jawabannya penggunaan voyager tentang menggunakan data-*atribut. Contoh menggunakan PHP:

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

Jika Anda menggunakan Chimp / Webdriver.io , mereka mendukung lebih banyak penyeleksi CSS daripada spesifikasi CSS.

Ini, misalnya, akan mengklik jangkar pertama yang berisi kata "Bad bear":

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

Sebagian besar jawaban di sini mencoba menawarkan alternatif cara menulis kode HTML untuk memasukkan lebih banyak data karena setidaknya hingga CSS3 Anda tidak dapat memilih elemen dengan teks dalam sebagian. Tapi itu bisa dilakukan, Anda hanya perlu menambahkan sedikit vanilla JavaScript, perhatikan karena perempuan juga mengandung laki-laki itu akan dipilih:

      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>

Saya menemukan opsi atribut untuk menjadi taruhan terbaik Anda jika Anda tidak ingin menggunakan javascript atau jquery.

Misalnya untuk menata semua sel tabel dengan kata siap, Dalam HTML lakukan ini:

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

Kemudian di css:

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

Anda juga bisa menggunakan contentdengan attr()dan menata sel tabel yang ::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 ZeroWidthSpacedigunakan untuk mengubah warna dan dapat ditambahkan menggunakan JavaScript vanilla:

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

Meskipun <td>tag akhir dapat dihilangkan dengan melakukan hal itu dapat menyebabkannya diperlakukan sebagai non-kosong.

Jika Anda tidak membuat DOM sendiri (misalnya dalam skrip pengguna) Anda dapat melakukan hal berikut dengan JS murni:

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>

Output konsol

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

Melakukan Widget Filter kecil seperti ini:

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

Sintaks pertanyaan ini terlihat seperti sintaks Robot Framework. Dalam hal ini, meskipun tidak ada pemilih css yang dapat Anda gunakan untuk berisi, ada kata kunci SeleniumLibrary yang dapat Anda gunakan sebagai gantinya. The Tunggu Sampai Element Berisi .

Contoh:

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