Existe-t-il un sélecteur CSS pour les éléments contenant certains textes?

Je recherche un sélecteur CSS pour le tableau suivant:

Peter    | male    | 34
Susanne  | female  | 12

Existe-t-il un sélecteur pour faire correspondre tous les DT contenant "masculin"?

Si je lis correctement la spécification , non.

Vous pouvez faire correspondre un élément, le nom d'un attribut dans l'élément et la valeur d'un attribut nommé dans un élément. Cependant, je ne vois rien pour faire correspondre le contenu d'un élément.

Utilisation de jQuery:

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

On dirait qu'ils y pensaient pour la spécification CSS3, mais cela n'a pas fait la coupe .

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

Vous devez ajouter un attribut de données aux lignes appelées data-genderavec une valeur maleou femaleet utiliser le sélecteur d'attribut:

HTML:

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

CSS:

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

Il existe en fait une base très conceptuelle pour expliquer pourquoi cela n'a pas été mis en œuvre. Il s'agit d'une combinaison de 3 aspects fondamentaux:

1. Le contenu textuel d'un élément est effectivement un enfant de cet élément
2. Vous ne pouvez pas cibler directement le contenu du texte
3. CSS ne permet pas l'ascension avec des sélecteurs

Ensemble, ces 3 signifient qu'au moment où vous avez le contenu du texte, vous ne pouvez pas remonter à l'élément contenant, et vous ne pouvez pas styliser le texte actuel. Ceci est probablement significatif car la descente ne permet qu'un suivi singulier du contexte et de l'analyse de style SAX. Des sélecteurs ascendants ou autres impliquant d'autres axes introduisent le besoin d'une traversée plus complexe ou de solutions similaires qui compliqueraient grandement l'application de CSS au DOM.

Vous pouvez définir le contenu comme attribut de données, puis utiliser des sélecteurs d'attribut , comme illustré ici:

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

Vous pouvez également utiliser jQuery pour définir facilement les attributs de contenu de données:

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

Comme CSS ne dispose pas de cette fonctionnalité, vous devrez utiliser JavaScript pour styliser les cellules en fonction du contenu. Par exemple avec XPath contains:

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

Ensuite, utilisez le résultat comme ceci:

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

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

J'ai bien peur que ce ne soit pas possible, car le contenu n'est pas un attribut ni accessible via une pseudo classe. La liste complète des sélecteurs CSS3 se trouve dans la spécification CSS3 .

Pour ceux qui cherchent à faire des sélections de texte CSS Selenium, ce script pourrait être d'une certaine utilité.

L'astuce consiste à sélectionner le parent de l'élément que vous recherchez, puis à rechercher l'enfant qui a le texte:

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

Cela retournera le premier élément s'il y en a plus d'un puisque c'est toujours un élément, dans mon cas.

Je suis d'accord que l'attribut de données (réponse du voyageur) est la façon dont il doit être géré, MAIS, les règles CSS comme:

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

peut souvent être beaucoup plus facile à configurer, en particulier avec les bibliothèques côté client comme angularjs qui peuvent être aussi simples que:

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

Assurez-vous simplement que le contenu n'est qu'un mot! Ou vous pouvez même mapper vers différents noms de classe CSS avec:

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

Pour être complet, voici l'approche des attributs de données:

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

@ voyager's answer about using data-*attribute (par exemple, data-gender="female|male"c'est l' approche la plus efficace et conforme aux normes en 2017:

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

La plupart des objectifs peuvent être atteints car il existe des sélecteurs, quoique limités, orientés autour du texte. La :: première lettre est un pseudo-élément qui peut appliquer un style limité à la première lettre d'un élément. Il y a aussi un pseudo-élément :: première ligne en plus de sélectionner évidemment la première ligne d'un élément (comme un paragraphe) implique également qu'il est évident que CSS pourrait être utilisé pour étendre cette capacité existante pour styliser des aspects spécifiques d'un textNode .

Jusqu'à ce qu'un tel plaidoyer réussisse et soit mis en œuvre, la prochaine meilleure chose que je pourrais suggérer le cas échéant est de explode/ splitmots en utilisant un suppresseur d'espace, sortir chaque mot individuel à l'intérieur d'un spanélément et puis si l'objectif de mot / style est prévisible, utiliser en combinaison avec : nth selectors :

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

Sinon, si ce n'est pas prévisible , encore une fois, utilisez la réponse de Voyager concernant l'utilisation de l' data-*attribut. Un exemple utilisant PHP:

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

Si vous utilisez Chimp / Webdriver.io , ils prennent en charge beaucoup plus de sélecteurs CSS que la spécification CSS.

Celui-ci, par exemple, cliquera sur la première ancre qui contient les mots "Bad bear":

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

La plupart des réponses ici tentent d'offrir une alternative à la façon d'écrire le code HTML pour inclure plus de données, car au moins jusqu'à CSS3, vous ne pouvez pas sélectionner un élément par du texte interne partiel. Mais cela peut être fait, il vous suffit d'ajouter un peu de JavaScript vanille, notez que puisque la femelle contient également le mâle, il sera sélectionné:

      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>

Je trouve que l'option d'attribut est votre meilleur choix si vous ne souhaitez pas utiliser javascript ou jquery.

Par exemple, pour styliser toutes les cellules du tableau avec le mot prêt, en HTML, procédez comme suit:

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

Puis en css:

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

Vous pouvez également utiliser contentavec attr()et styliser des cellules de tableau qui sont ::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 ZeroWidthSpaceest utilisé pour changer la couleur et peut être ajouté à l'aide de JavaScript vanille:

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

Bien que la <td>balise de fin s puisse être omise , cela peut la traiter comme non vide.

Si vous ne créez pas le DOM vous-même (par exemple dans un script utilisateur), vous pouvez faire ce qui suit avec du JS pur:

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>

Sortie console

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

Faire de petits widgets de filtre comme ceci:

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

La syntaxe de cette question ressemble à la syntaxe de Robot Framework. Dans ce cas, bien qu'il n'y ait pas de sélecteur css que vous puissiez utiliser pour contient, il existe un mot clé SeleniumLibrary que vous pouvez utiliser à la place. L' élément Wait Until contient .

Exemple:

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