Is there a CSS selector for elements containing certain text

Question

I am looking for a CSS selector for the following table   Peter      male      34 Susanne    female    12   Is there any selector to match all TDs containing  male

User · Answer

Looks like they were thinking about it for the CSS3 spec but it didn t make the cut    contains   CSS3 selector http   www w3 org TR css3-selectors  content-selectors

User · Answer

You d have to add a data attribute to the rows called data-gender with a male or female value and use the attribute selector   HTML    lt td data-gender  male  gt     lt  td gt    CSS   td data-gender  male

User · Answer

Doing small Filter Widgets like this        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

User · Answer

If you don t create the DOM yourself  e g  in a userscript  you can do the following with pure JS    x000D   x000D  for   td of document querySelectorAll  td       x000D    console debug  text    td  td innerText  x000D    td setAttribute  text   td innerText  x000D    x000D  for   td of document querySelectorAll  td text  male       x000D    console debug  male    td  td innerText  x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Peter lt  td gt  x000D       lt td gt male lt  td gt  x000D       lt td gt 34 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Susanne lt  td gt  x000D       lt td gt female lt  td gt  x000D       lt td gt 12 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Console output  text   lt td gt  Peter text   lt td gt  male text   lt td gt  34 text   lt td gt  Susanne text   lt td gt  female text   lt td gt  12 male   lt td text  male  gt  male

User · Answer

Most of the answers here try to offer alternative to how to write the HTML code to include more data because at least up to CSS3 you cannot select an element by partial inner text  But it can be done  you just need to add a bit of vanilla JavaScript  notice since female also contains male it will be selected    x000D   x000D        cells   document querySelectorAll  td    x000D       console log cells   x000D           forEach call cells  function  el    x000D       if el innerText indexOf  male       -1   x000D         el click    click or any other option x000D       console log el  x000D         x000D          x000D    lt table gt  x000D         lt tr gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt male lt  td gt  x000D           lt td gt 34 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Susanne lt  td gt  x000D           lt td gt female lt  td gt  x000D           lt td gt 14 lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D     lt table gt     lt tr gt       lt td data-content  Peter  gt Peter lt  td gt       lt td data-content  male  gt male lt  td gt       lt td data-content  34  gt 34 lt  td gt     lt  tr gt     lt tr gt       lt td data-conten  Susanne  gt Susanne lt  td gt       lt td data-content  female  gt female lt  td gt       lt td data-content  14  gt 14 lt  td gt     lt  tr gt   lt  table gt

User · Answer

If I read the specification correctly  no     You can match on an element  the name of an attribute in the element  and the value of a named attribute in an element   I don t see anything for matching content within an element  though

User · Answer

For those who are looking to do Selenium CSS text selections  this script might be of some use   The trick is to select the parent of the element that you are looking for  and then search for the child that has the text    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 lt IWebElement gt  element  0       This will return the first element if there is more than one since it s always one element  in my case

User · Answer

voyager s answer about using data-  attribute  e g  data-gender  female male  is the most effective and standards compliant approach as of 2017    data-gender  male    background-color   000  color   ccc     Pretty much most goals can be attained as there are some albeit limited selectors oriented around text  The   first-letter is a pseudo-element that can apply limited styling to the first letter of an element  There is also a   first-line pseudo-element besides obviously selecting the first line of an element  such as a paragraph  also implies that it is obvious that CSS could be used to extend this existing capability to style specific aspects of a textNode   Until such advocacy succeeds and is implemented the next best thing I could suggest when applicable is to explode split words using a space deliminator  output each individual word inside of a span element and then if the word styling goal is predictable use in combination with  nth selectors    p   explode      words   foreach   p as  key1   gt   value1     echo   lt span gt    value1   lt  span gt       Else if not predictable to  again  use voyager s answer about using data-  attribute  An example using PHP    p   explode      words   foreach   p as  key1   gt   value1     echo   lt span data-word     value1    gt    value1   lt  span gt

User · Answer

There is actually a very conceptual basis for why this hasn t been implemented   It is a combination of basically 3 aspects    The text content of an element is effectively a child of that element You cannot target the text content directly CSS does not allow for ascension with selectors   These 3 together mean that by the time you have the text content you cannot ascend back to the containing element  and you cannot style the present text   This is likely significant as descending only allows for a singular tracking of context and SAX style parsing  Ascending or other selectors involving other axes introduce the need for more complex traversal or similar solutions that would greatly complicate the application of CSS to the DOM

User · Answer

You could set content as data attribute and then use attribute selectors  as shown here   x000D   x000D     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    x000D   lt table gt     lt tr gt       lt td data-content  Peter  gt Peter lt  td gt       lt td data-content  male  gt male lt  td gt       lt td data-content  34  gt 34 lt  td gt     lt  tr gt     lt tr gt       lt td data-content  Susanne  gt Susanne lt  td gt       lt td data-content  female  gt female lt  td gt       lt td data-content  14  gt 14 lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D   You can also use jQuery to easily set the data-content attributes    function         quot td quot   each function        var  this     this        this attr  quot data-content quot    this text

User · Answer

You could also use content with attr   and style table cells that are  not  empty    x000D   x000D  th  after   content  attr data-value    x000D  td  after   content  attr data-value    x000D  td data-value  not  empty    x000D    color  fuchsia  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th data-value  Peter  gt  lt  th gt  x000D       lt td data-value  male  gt  amp  x0200B  lt  td gt  x000D       lt td data-value  34  gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt th data-value  Susanne  gt  lt  th gt  x000D       lt td data-value  female  gt  lt  td gt  x000D       lt td data-value  12  gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt th data-value  Lucas  gt  lt  th gt  x000D       lt td data-value  male  gt  amp  x0200B  lt  td gt  x000D       lt td data-value  41  gt  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    A ZeroWidthSpace is used to change the color and may be added using vanilla JavaScript   const hombres   document querySelectorAll  td data-value  male      hombres forEach hombre   gt  hombre innerHTML     amp  x0200B       Although the  lt td gt s end tag may be omitted doing so may cause it to be treated as non-empty

User · Answer

Using jQuery       td contains  male

User · Answer

As of Jan 2021  there IS something that will do just this    has       only one catch  this is not supported in any browser yet Example  The following selector matches only  elements that directly contain an  child  a has  gt  img   References  https   developer mozilla org en-US docs Web CSS  has https   caniuse com  search has

User · Answer

If you re using Chimp   Webdriver io  they support a lot more CSS selectors than the CSS spec    This  for example  will click on the first anchor that contains the words  Bad bear    browser click  a  Bad Bear

User · Answer

The syntax of this question looks like Robot Framework syntax  In this case  although there is no css selector that you can use for contains  there is a SeleniumLibrary keyword that you can use instead  The Wait Until Element Contains   Example   Wait Until Element Contains      element      contains  Wait Until Element Contains     td   male

User · Answer

I agree the data attribute  voyager s answer  is how it should be handled  BUT  CSS rules like      td male   color  blue    td female   color  pink        can often be much easier to set up  especially with client-side libs like angularjs which could be as simple as    lt td class    person gender    gt    Just make sure that the content is only one word  Or you could even map to different CSS class names with    lt td ng-class    masculine   person isMale     feminine   person isFemale     gt    For completeness  here s the data attribute approach    lt td data-gender    person gender    gt

User · Answer

I find the attribute option to be your best bet if you don t want to use javascript or jquery    E g to style all table cells with the word ready  In HTML do this     lt td status   ready  gt Ready lt  td gt    Then in css   td status   ready             color  red

User · Answer

I m afraid this is not possible  because the content is no attribute nor is it accessible via a pseudo class  The full list of CSS3 selectors can be found in the CSS3 specification

User · Answer

As CSS lacks this feature you will have to use JavaScript to style cells by content  For example with XPath s contains   var elms   document evaluate     td contains     male      node  null  XPathResult UNORDERED NODE SNAPSHOT TYPE  null     Then use the result like so   for   var i 0   i  lt  elms snapshotLength  i         elms snapshotItem i  style background    pink       https   jsfiddle net gaby de wilde o7bka7Ls 9

[css] Is there a CSS selector for elements containing certain text?

Examples related to css

Examples related to css-selectors