Question 208294 in Html Question posted in
Some basic documentation can be found here.

How to address HTML elements containing a string, in CSS?

As I have been informed, there’s an old function in CSS:

[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?

Tags:

2

Answers


  1. 0

    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 protected]">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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search