Changing a specific element's text color using CSS if the inner text equals a string

Question

so I'm editing this FANDOM wiki.

I have this element here:

<h1 class="page-header__title">Captain</h1>

As you can see "Captain" would be the article's name from the Wiki. Every article has their own subdomain link and will make the inner text of this element different.

Is there anyway I could simply only change the element's CSS if the inner Text equals Captain?

Hopefully you know what I'm trying to accomplish.

Here is a example of what I'm trying to accomplish:

.edit-info-user a[href$="/wiki/User:Potato"]::Before {
    content: "( Bureaucrat ) ";
    font-size: 9px;
    color: #f00;
    letter-spacing: 0.5px;
}

As you can see, this would only tamper with the element's CSS if the link equals "/wiki/User:Potato".

Answer 1

You can't. You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element.

So the only way to do that without javascript would be to add data or a class.

Example :

h1[data-text=Captain] {
  color: red
}

<h1 class="page-header__title" data-text="Captain">Captain</h1>

Here is a way by javascript, but I do not recommend it.

let title = document.querySelector('.page-header__title');


if (title.innerText === 'Captain') {
    /* if you want to edit directly its style */
    title.style.color = 'red';
    /* if you want a class */
    title.classList.add('.your-class');
}

<h1 class="page-header__title">Captain</h1>