-2

As I have been informed, there's an old function in CSS (and later it turned out it's irrelevant):

[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector

It's supported from v2.0 of Chrome, they say, but it doesn't work.

Is there any other way?

ADDITION: I would like to address a HTML-tag that contains a certain text: 'word':

<p class="something">123 word 456</div>

A theoretical selection could be :contains():

p.something:contains('word') {}

Thanks to answers, I now know that the selector above is not for this, but then what? Is there a CSS addressing for this?

Vendrel
  • 865
  • 9
  • 19
  • 1
    Your question is not clear. Please elaborate on what you are trying to ask, to include an example which demonstrates the problem and a description of what specific problem you are observing. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Jul 14 '23 at 11:26
  • 1
    This is maybe the best css selector guide [w3schools](https://www.w3schools.com/cssref/css_selectors.php) – Nebojsa Nebojsa Jul 14 '23 at 11:43
  • 1
    Please read [ask] and [it's not working](https://idownvotedbecau.se/itsnotworking/). We can't tell what is wrong with your attempt to implement that selector (not a function!) if you don't show us a [mcve] with CSS and HTML (use the [stack snippets](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) feature of the question editor to provide a live demo. – Quentin Jul 15 '23 at 09:11
  • Edited just now. Thank you for the warning. :) – Vendrel Jul 15 '23 at 09:14
  • 1
    Duplicate: https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text – Quentin Jul 15 '23 at 09:18
  • Are you able to control the HTML tag elements at all? – Martin Jul 18 '23 at 11:23

2 Answers2

1

Code from your link that you posted is not quite ok. It have 2 mistakes.

-1- In CSS there is selector that is not exist inside HTML .examples1 (typo mistake)

-2- Also in CSS, quotes are not ok. These quotes ” need to be converted into this "

And with that fixes everything is working (of course we can not use images because of the paths, but we can test it with colors)

div.example1 ul {
  list-style-type: none;
}
 
div.example1 ul li a[href^="https://"] {
  color: red;
}
 
div.example1 a[href^="mailto:"] {
  color: green;
}
 
div.example1 a[href^="ftp://"] {
  color: gray;
}
 
div.example1 a[href^="magnet"] {
  color: orange;
}
<div class="example1">
  <ul>
    <li><a href="http://www.google.com">Visit a website</a></li>
    <li><a href="https://www.google.com">Visit a secure website</a></li>
    <li><a href="mailto:email@email.com">Send an email</a></li>
    <li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
    <li><a href="magnet:…">Download from a magnet link</a></li>
  </ul>
</div>
Nebojsa Nebojsa
  • 1,395
  • 1
  • 7
  • 19
0

Direct answer: That feature is not present in CSS as of now.

But there are some ways to implement that.

Easiest would be the attribute selector but I am guessing that, that is not what you want, so what you can do is implement JS.

function addClassToContainer(element, searchFor, className) {
  const divs = document.querySelectorAll(element);
  for (const div of divs) {
    if (div.textContent.includes(searchFor)) {
      div.classList.add(className);
    }
  }
}

addClassToContainer('div', "the string to search", "it-contains-the-string");

Now, it'll search for all divs (or the element you provided) that contains the string and add the class.

So just add the style for the class in CSS like:

.it-contains-the-string {
 color: red
}

So all at once:

function addClassToContainer(element, searchFor, className) {
  const divs = document.querySelectorAll(element);
  for (const div of divs) {
    if (div.textContent.includes(searchFor)) {
      div.classList.add(className);
    }
  }
}

addClassToContainer('div', "the string to search", "it-contains-the-string");
.it-contains-the-string{
    color: red;
}
<div>This contains the string to search</div>
<div>This is other element</div>
Hind Sagar Biswas
  • 185
  • 8