RichHtmlField: Using :first-of-type (and other pseudo-classes) causes blank entries in Markup Styles menu

Question

I've set up a RichHtmlField like so:

<PublishingWebControls:RichHtmlField PrefixStyleSheet="sbg" id="SomethingUseful" FieldName="SomethingUseful" HasInitialFocus="False" MinimumEditHeight="200px" runat="server"/>

As you can see, I've set PrefixStyleSheet="sbg" so the following adds a style to the Markup Styles dropdown in the ribbon:

div.sbgElement-Bump {
    -ms-name:"Bump";
    margin: 0 0 1.666667em;
    /* Snipped irrelevant stuff */
}

However, if I then add these entries below it, a couple of blank entries appear in the Markup Styles drop-down:

div.sbgElement-Bump:first-of-type {
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
}
div.sbgElement-Bump:last-of-type {
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

Hovering over them causes JS errors.

I've seen the same effect using the :before and :after selectors (e.g. to add quotes to a <q> or <blockquote> element).

Does anybody know of a fix or workaround for this problem?

Answer 1

Use another CSS selector, such as div[class*="sbgElement-Bump"]:first-of-type.