I've found it exceedingly difficult to force a style to attach itself to a particular HTML element. Generally, you end up with something like:

<div class="list-breaks">
    <ul><li>...</li></ul>
</div>

I usually just update the CSS to accommodate:

ul.list-breaks,
.list-breaks ul {
    // styles here
}

Ugh. Yeah, sometimes its tough to get the editor to apply the styles the way you want. If you are careful about how much you select and maybe include a line before and/or after the list, you might get it to work.

However, something as delicate as this might require you to step outside of the editor. Another approach I often use is to just have a standard list style for WYSIWYG editors and wrap the output in the view with a style. Obviously that limits your ability to have different list styles in the same editor. This would mean having a standard list in the editor and something like this in the view:

<div class="wysiwyg list-breaks">
    @Umbraco.Field("body")
</div>

I have done this before by modifying ~/config/tinyMceConfig.config like so:

<?xml version="1.0" encoding="utf-8"?>
<tinymceConfig>
    <customConfig>
        <config key="style_formats">[
            {
                "title": "Checkmark List",
                "selector": "ul",
                "classes": "rich-text--checkmarks"
            }
        ]</config>
    </customConfig>
</tinymceConfig>

Just a heads up that the quotes in the JSON matter (I think Umbraco doesn't like it if you use unquoted JSON keys).

In my case, I was trying to make a UL have checkmarks rather than bullet points. If you also want the styles to appear in the back office, you can edit the CSS file that Umbraco creates for tinyMCE rich text editors to include the styles:

Remember that you'll have to configure your rich text data type to make use of that stylesheet.

is working on a reply...