Question 45742 in CSS Question posted in
Some basic documentation can be found here.

WordPress; Elementor; CSS; ".elementor img" Overrides CSS Class Inside of the Pagebuilder

I use WP and Elementor. Inside of the Pagebuilder I wrote a HTML code with an Img:

<div><a class="sprachauswahl-container">
    <img src="https://initiative-gkw.ch/wp-content/uploads/2022/09/Franzoesisch-Flagge.png" **class="sprachauswahl-flaggen"**></br>Français</a>
</a>
</div>

Everything workes fine and i gave the img the CSS – class "sprachauswahl-flaggen"

In the side settings -> Custom CSS i added to the class the following attributes

.sprachauswahl-flaggen {
    height: 30px;
    width: auto;
}

No changes appear and the inspector tells me, that the main CSS attribute is taken from .elementor img {…}. The width is actually accepted but only because .elementor img had no instructions for the width. Therefore I can exclude all typos.

If i put the style settings inline in the HTML – text, everything works just fine.
But since i have to adjust multiple images with the same CSS style a custom CSS for the related page seems to me the right option.

In my understanding the Custom CSS of the Side should have higher priority as the general CSS settings.
What am i missing?
How can i give the cusom CSS higher priority then the .elementor class?

Thanks a lot for your support 🙂

I search for this problem but it seems to be to specific. I checked for typos. I looked in the Inspector to understand the problem. But i miss some basic understanding. A simple way to give the custom CSS higher priority would be great.

Tags:

2

Answers


  1. 0

    The .elementor ancestor selector on an <img> element is going to be higher than the solo class target used. You can either target an <img> element with a specific class, or start at the same original ancestor selector and work down to the class you want to target.

    .elementor img {
  height: 100px;
}

.sprachauswahl-flaggen {
  height: 30px;
  width: auto;
}

/* Target <img> element with class */
img.custom-size-flag {
  height: 30px;
  width: auto;
}
/* or use following selector:
.elementor .custom-size-flag
*/
    <div class="elementor">
  <div>
    <a class="sprachauswahl-container">
      <img src="https://initiative-gkw.ch/wp-content/uploads/2022/09/Franzoesisch-Flagge.png" class="sprachauswahl-flaggen"></br>Français
    </a>
  </div>
  <div>
    <a class="sprachauswahl-container">
      <img src="https://initiative-gkw.ch/wp-content/uploads/2022/09/Franzoesisch-Flagge.png" class="custom-size-flag"></br>Français
    </a>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can always use !important to check if the problem is the specificity of your class selector.

    .sprachauswahl-flaggen {
    height: 30px !important;
    width: auto !important;
}

    It’s not a very good practice to use !important, but it’s a quick fix, and if you have a problem with only a few classes, you can surely use it to make your life easier.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search