0

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".

Ownslo
  • 77
  • 1
  • 10

2 Answers2

3

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>
mttetc
  • 711
  • 5
  • 12
  • I'm able to add JavaScript. Thanks for the information. I'll accept your answer in 5 minutes when it allows me, but I was really hoping not to use JavaScript. Trying to keep it mainly CSS, but if it's not possible, it isn't possible. – Ownslo Aug 14 '20 at 08:25
  • Can your page have multiple titles ? (So I can update my code better) – mttetc Aug 14 '20 at 08:26
  • There will be only one element with the class name "page-header__title". – Ownslo Aug 14 '20 at 08:28
  • Okay, I updated the code to fit your needs – mttetc Aug 14 '20 at 08:30
0

You can try adding classList to the desired element with the matching class and make sure to create this class with the design that you want on your CSS file.

Saurabh
  • 745
  • 1
  • 9
  • 33
kiwi
  • 1
  • 1