One style with a class + another with two classes which one is used be the first style, then both are selected in style combo menu.

[masterdjon]

Steps to reproduce

1. Create two styles that both applies to the same elements (well in fact, it seems the problem maybe only related to the "image2" plugin. I can say so, because I have the same stuff for "table" element)
2. One with one class. In example : fullWidth
3. Second with two classes which one is the same as the first style.
4. In the editor, add an image element that you set the style "Styles_Base_FullWidthWithoutLeftMargin"

Styles.js Example

    	{
    		name: $l('Styles_Base_FullWidthWithMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth' }
    	},
    	{
    		name: $l('Styles_Base_FullWidthWithoutLeftMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth outSectionBodyLeft' }
    	}

HTML example

<p>
	<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1"
		data-cke-filter="off"
		class="cke_widget_wrapper cke_widget_inline cke_image_nocaption"
		data-cke-display-name="image" data-cke-widget-id="0" role="region"
		aria-label="Élément  image"><img alt="" height="500"
		data-cke-saved-src="IMAGE_URL_REMOVED" src="IMAGE_URL_REMOVED"
		width="1500" class="cke_widget_element outSectionBody fullWidth"
		data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22IMAGE_URL_REMOVED%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%221500%22%2C%22height%22%3A%22500%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3A%7B%22outSectionBody%22%3A1%2C%22fullWidth%22%3A1%7D%7D"
		data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0"
		data-widget="image"><span
		class="cke_reset cke_widget_drag_handler_container"
		style="background: url(&quot;URL_REMOVED/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039); top: -15px; left: -20px; display: block;"><img
			class="cke_reset cke_widget_drag_handler"
			data-cke-widget-drag-handler="1"
			src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="
			width="15" title="Cliquer et glisser pour déplacer" height="15"
			role="presentation" draggable="true"></span><span
		class="cke_image_resizer"
		title="Cliquer et glisser pour redimensionner">&#8203;</span></span>
</p>

Expected result

Reopening the style combo show only the second style selected, not the first.

Actual result

Reopening the style combo show both styles selected.

Fix

This could resolved by looking at the classes in the combo that search via a regex which is set to full word. I didn't look the code, but as I saw in other issues, it seems that the editor splits the classes using a space to find the correlated style.

Other details (browser, OS, CKEditor version, installed plugins)

Not relevant except for the image2 plugin installed. Though, just saying the "$l" function is just a translating function of my own.

[Jakub Ś]

Yes, you are right - I have tried using same classes for tables and widgets. in case of widgets both classes are selected in dropdown when you aplly just Styles_Base_FullWidthWithoutLeftMargin. In tables only second class is selected.