Custom CSS is affected for all the h3 tags, need to add specific heading

Hi,

of course using the css selector h3 changes the appearance of every h3 element.

What you want to use is an ID, in elementor you need to click on the element that you want to change, then go to Advanced and then under Layout give it a unique css id.

Then at the custom css you can use the selector #your_custom_id to only style this heading.

e.G.

#custom_h3_green{
   color: green;
}

I tried out but its not working for the header tags, please check both two screenshots!

tag name: custom_h3

tag: https://snipboard.io/wXCiVH.jpg

code: https://snipboard.io/VDaZkm.jpg

• This reply was modified 1 year, 5 months ago by henarangoda.

You have to add a # in front of the ID in order for css to understand that you want to select an ID

Note: only change it in the code not in the elementor tag

eg.

#custom_h3_green{
   color: green;
}

Ah okay got it, why we use # in those kind of tags? can we use selector tag for it?

Hi, because you have assigned a CSS ID you have to select them using # CSS ID’s have the property that they need to be unique, in your case you need only one unique element so you should use id’s.

What do you mean with a selector tag?

Ok, when adding custom css tag and additional css, there is a additional space coming in the header tag, please refer 1st ss.

https://snipboard.io/lJtb4D.jpg

But when adding h3 tag as it is to the additional css section, the space not appeared, please refer 2nd ss.

https://snipboard.io/6IDdaO.jpg

Why is that please tell me reason and fix this issue!

Fixed this issue with removing additional margins, thank you so much for your support!