How to apply css to a list inside a single element and not impact other elements

[jasonixr]

I’ve continued to really appreciate the ability to apply element css ever since this feature was added to Pro.

A long time ago there was a thread that identified how I could apply css to a specific class but only inside a single element.

However, in the situation where I’m attempting to do something similar but just to a list I can’t figure out how to constrain the CSS to just the list inside the element.

If I apply this css to a text element it changes all the lists in all text elements on the page:

$el li:before {
font-size: 0.7em !important;
content: "• ";
color: #64A70B;
vertical-align: 10%;
}

How do I constrain it to just the individual element?

[prakash_s]

Hi @jasonixr,

Thanks for writing to us.

First of all, add a unique custom class, list-item in the element you added those li. Then add this code to the theme option’s CSS

.list-item li:before {
font-size: 0.7em !important;
content: "• ";
color: #64A70B;
vertical-align: 10%;
}

Here is an example of adding a class in the Text element.

Adding a unique class as a selector, the code work only for that particular element.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks