web-dev-qa-db-ja.com

特定のテキストを含む要素用のCSSセレクターはありますか？

次の表のCSSセレクターを探しています。

Peter    | male    | 34
Susanne  | female  | 12

"male"を含むすべてのTDに一致するセレクターはありますか？

csscss-selectors
401
jantimon

私が 仕様を読んだ場合 正しく、いいえ。

要素、要素内の属性の名前、および要素内の名前付き属性の値を突き合わせることができます。ただし、要素内のコンテンツの一致については何も表示されません。

297
Dean J

JQueryを使う：

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

彼らがCSS3仕様のためにそれについて考えていたように見えます しかし、それはカットをしませんでした 。

:contains() CSS3セレクタ http://www.w3.org/TR/css3-selectors/#content-selectors

122
Jeff Beaman

maleまたはfemale値を使用してdata-genderという行にデータ属性を追加し、属性セレクタを使用する必要があります。

HTML：

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

CSS：

td[data-gender="male"] { ... }
96
Esteban Küber

なぜこれが実装されていないのかについては、実際には非常に概念的な根拠があります。それは基本的に3つの側面の組み合わせです。

  1. 要素のテキストコンテンツは事実上その要素の子です。
  2. テキストコンテンツを直接ターゲティングすることはできません
  3. CSSはセレクターによる上昇を許可していません

これら3つを合わせると、テキストの内容が完成するまでに、元の要素に戻ることはできず、現在のテキストのスタイルを設定することはできません。降順ではコンテキストの追跡とSAXスタイルの解析しかできないため、これはおそらく重要です。他の軸を含む昇順セレクタまたは他のセレクタは、DOMのCSSの適用を非常に複雑にする、より複雑なトラバースまたは同様の解決策の必要性をもたらします。

60
Matt Whipple

次に示すように、コンテンツをデータ属性として設定してから 属性セレクタ を使用できます。

/* 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());
  });
});
24
Buksy

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/

5
user40521

内容は属性でもなく、疑似クラスからアクセスすることもできないため、これは不可能です。 CSS3セレクタの完全なリストは CSS3仕様 にあります。

5
Edwin V.

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

私の場合は常に1つの要素なので、複数ある場合は最初の要素を返します。

4
Matas Vaitkevicius

data-*属性の使用に関する@voyagerの回答（例：data-gender="female|male"は、2017年時点で最も効果的で標準に準拠したアプローチです）：

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

ほとんどの目標を達成できます。ただし、テキストを中心とした限定的なセレクターがいくつかあります。 :: first-letter は、要素の最初の文字に制限されたスタイルを適用できる pseudo-element です。要素の最初の行（段落など）を選択すること以外に :: first-line 疑似要素もあり、この既存の機能を拡張するためにCSSを使用できることは明らかですtextNodeの特定の側面をスタイルします。

そのようなアドボカシーが成功するまで、が実装されるまで、適切な場合に提案できる次善策はexplode/splitワードスペースデリミネーター、span要素内の個々のWordを出力し、Word /スタイリングの目標が予測可能であれば-と組み合わせて使用​​します ：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>;
}
2
John

私は同意します データ属性 （voyager's answer）それがどのように取り扱われるべきであるか、しかし、CSSのルールは以下のように：

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

特に、クライアントサイドのlibsがangularjsのようにシンプルである場合は、セットアップがはるかに簡単になります。

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

内容が1つのWordだけであることを確認してください。あるいは、以下のようにして異なるCSSクラス名にマッピングすることもできます。

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

完全を期すために、これがデータ属性アプローチです。

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

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>

ZeroWidthSpace は色を変更するために使用され、Vanilla JavaScriptを使用して追加することができます。

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

<td>s終了タグ は省略することができますが すると空でないものとして扱われる可能性があります。

1
Josh Habdas

この質問の構文は、ロボットフレームワークの構文のように見えます。この場合、containsに使用できるcssセレクターはありませんが、代わりに使用できるSeleniumLibraryキーワードがあります。 要素が含まれるまで待機 。

例：

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

少なくともCSS3までは部分的な内部テキストで要素を選択することができないので、ここでの答えのほとんどはより多くのデータを含むためにHTMLコードを書く方法に代わるものを提供しようとします。しかし、それは可能です、あなたはちょうど女性がまたそれが選択される男性を含むのでちょっとVanilla 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>
0
Eduard Florinescu

Chimp / Webdriver.io を使用している場合は、 CSS仕様よりも多くのCSSセレクタをサポートしています 。

これは、例えば、 "Bad bear"という単語を含む最初のアンカーをクリックします。

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