Changing HTML span style using CSS

Question

I use Notion, which does not have many styling options, but thankfully, someone made an extra component called notion enhancer that allows for many options, including uploading your own css file.

Here's my issue: I changed the color of bold and italic text, targeting it using the class .notranslate

this was my original css:

.notranslate span {
  color:#ff72aa !important;
}

Now, Notion must have recently updated or something, because .notranslate span applies to all written text now, whether it is bolded, italicized, or neither. I'm trying to figure out a way to target the bold and italic text using css since I am unable to change the span style in the html.

This is what the html looks like now for text that has some words italicized:

<div contenteditable="true" spellcheck="true" placeholder="To-do" data-root="true" class="notranslate" style="max-width: 100%;white-space: pre-wrap;word-break: break-word;caret-color: rgb(55, 53, 47);padding: 3px 2px;text-align: left;flex-grow: 1;"><span>Start Reading </span><span style="font-style:italic" data-token-index="1"><span>The Jasmine Throne</span></span></div>

This is what the html looks like now for text that has some words bolded:

<div contenteditable="true" spellcheck="true" placeholder="To-do" data-root="true" class="notranslate" style="max-width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 3px 2px; text-align: left; flex-grow: 1;"><span>Star</span><span style="font-weight:600" data-token-index="1"><span>t Readin</span></span><span>g </span><span style="font-style:italic" data-token-index="3"><span>The Hundred Years' War on Palestine</span></span></div>

Essentially, I am trying to find a new way to change the color of bold and italic text without changing the regular text beside it. I tried something like this, but it does not work:

.notranslate span [style*='font-style:italic;'] {
color:#ff72aa;
}

.notranslate span [style*='font-weight:bold;'] {
color:#ff72aa;
}

If I just use the style attribute, changing the color doesn't work (with or without !important).

Does anyone have any ideas on how to change the colors of [style*='font-style:italic;'] and [style*='font-weight:bold;'] without disrupting the regular text? And I cannot touch the html since Notion has no options for playing with its code. My only option is to upload an extra css or js file.

I tried my best to explain my issue, but sometimes I have trouble explaining things, so if you need clarification on something, please let me know. I apologize for any confusion.

Answer 1

You are almost there! Style selectors need to match exactly, so you have a typo in your font weight being numeric 600 rather than bold, and the spacing between your colon and the style needs to match perfectly.

If any more styles are added this will break, due to it no longer matching exactly.

Your second issue is that your attribute selector [style...] needs to come immediately after the element name without a space.

See the example below where the styling is edited to reflect this.

.notranslate span[style="font-style: italic;"] {
      color: #ff72aa;
    }
    .notranslate span[style="font-weight: 600;"] {
      color: #ff72aa;
    }

<div
      contenteditable="true"
      spellcheck="true"
      placeholder="To-do"
      data-root="true"
      class="notranslate"
      style="
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
        caret-color: rgb(55, 53, 47);
        padding: 3px 2px;
        text-align: left;
        flex-grow: 1;
      "
    >
      <span>Star</span
      ><span style="font-weight: 600;" data-token-index="1"
        ><span>t Readin</span></span
      ><span>g </span
      ><span style="font-style: italic;" data-token-index="3"
        ><span>The Hundred Years' War on Palestine</span></span
      >
    </div>

Answer 2

Not sure if it will work but I see a few issues:

1 - your [style... ] selector is not applied to the span but to its children:

you should do span[style...] and not span [style...]

2 - your selector have ; at the end while the style attribute doesn't:

you have style*='font-style:italic;' but your style is style='font-style:italic'

3 - your bold element is not using bold but 600