Can I write a CSS code for elements NOT having a certain class, but only style?

Question

I need to write css code for site built with elementor.

<p>
 <span style="color: #000000; font-family: Poppins;">
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
 </span>
</p>

I need to make my black text white and I need to keep that red text red.

I know that I can use elementor to color it. But I need it do thought CSS for dark mode.

I tried: p span span { color: red !important; } But sometimes elementor do paragraph with black text in p span span, so whole paragraph is red.

Thanks.

Does this answer your question? [Can I write a CSS selector selecting elements NOT having a certain class or attribute?](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr) — disinfor, Sep 21 '20 at 14:28

score 1 · Answer 1 · 2020-09-21T14:55:27.577

Can I write a CSS code for elements NOT having a certain class, but only style?

Yes you can. Here is a snippet based on your example.

*[style] {
  text-transform: uppercase;
}

<p>
  <span style="color: #000000; font-family: Poppins;">
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
  </span>
  <p class="lowercase">this is lowercase text</p>
</p>

To answering your comment, here is an example overriding all the elements' CSS, you can change it to match the result you want;

*[style] {
  text-transform: uppercase;
}
p span[style] {
  color: white !important;
  background: #000;
}
p span[style] span[style] {
  color: indigo !important;
  background: white;
}
p span[style] span[style] span[style]{
  color: darkgreen !important; // this has to be like that to override the style setting the text color to red.
}

<p>
  <span style="color: #000000; font-family: Poppins;">
  this is white text
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
  </span>
  <p class="lowercase">this is lowercase text</p>
</p>

I need to make only "have a nice day!" red. (And black text make white) — Jarda_H, Sep 21 '20 at 14:32
@Jarda_H i am a bit confused since the text is already red. It has `style="color: #ff0000"` so i edited my answer and write how to override this also. Unfortunately for elements that color setting exist in `style` attribute of the element, you will have to use `!important`. — , Sep 21 '20 at 14:47
Sorry I am bad at explaining :D But elementor is sometimes retarded so it generate more span or less. But i used code from other guy. Anyway thanks for help. — Jarda_H, Sep 21 '20 at 15:08

score 0 · Accepted Answer · answered Sep 21 '20 at 14:44

0

You can do the following to select only the text that has an inline style of #000000

span[style="color: #000000"] {
  color: grey !important;
}

<span style="color: #000000">First words</span>
<span style="color: #FF0000">Other words</span>

answered Sep 21 '20 at 14:44

dantheman

3,189
2
10
18

Thanks. I modified it a bit. I've added semicolon after color code and its working perfectly. – Jarda_H Sep 21 '20 at 15:09

Can I write a CSS code for elements NOT having a certain class, but only style?

2 Answers2