SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 {
    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?

share|improve this question
up vote 2 down vote accepted

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

share|improve this answer
Thank you! I'm feeling a bit silly for not thinking of such a simple solution myself. In the end I went with div[class*='sbgElement-Bump']:first-of-type to cope with the possibility of there being more than one class on the element. – Olly Hodgson Aug 29 '12 at 9:10

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.