Elementor Question posted in
A comprehensive tutorial library can be found here.

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

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.

Tags:

2

Answers


  1. 0

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

Back To Top
Search