How To Fix The Expected RBRACE And Unexpected Token CSS Issue In Divi Tutorial by Pee Aye Creative

How To Fix The Expected RBRACE Or Unexpected Token CSS Issue In Divi

Nelson Miller Pee Aye Creative
In this tutorial I will explain and show you how to fix the expected RBRACE CSS issue you may face when using custom code snippets.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

The Problem

If you are following one of our hundreds of tutorials and are copying and pasting CSS code or if you are writing your own CSS code, you may face an error message that looks similar to the screenshot below. It will say “Expected RBRACE.” and Unexpected token ‘}’ as a red error message.

expected rbrace and unexpected token in a Divi module CSS Main Content

This may seem like a big problem, but don’t worry, it is very minor, and the solution is very simple.  Both errors are related, and both of them are referring to the “right brace” otherwise known as the closing curly bracket.

The first error you may see is “Expected RBRACE” which is showing kind of as a false positive. When writing CSS, it is always required to end any code block with a curly bracket, so if it is missing, you will see the error of Expected RBRACE since it was expected (aka required) but not found.

The second error called the “unexpected token” is actually the real issue here. It is trying to let you know that a right curly bracket has been used in this CSS code box, but it is not possible to use that here.

However, in our screenshot and probably what you are facing, you can see it clearly has a right curly brace. One of the errors says it is expected, the other says it is unexpected. Hmm, so you may be saying, “This is a contradiction!” Well, you would actually be right, and I will do my best to explain.

In our case, there is a totally different issue that only happens if you are writing or pasting code in a Divi module in the Advanced tab in the Custom CSS toggle in the Main Element CSS box. So in reality, the error message is simply confused – there is no better way to let us know that there is a bigger issue, so it gives us these errors. If you are not familiar with the bigger issue, then I totally understand your confusion, but that is why I am writing this guide. The bigger problem causing this error to happen is simply due to the fact that you are pasting or writing the code in the wrong location.

The Wrong Location

Most likely you are seeing this issue when writing or pasting code within the Main Element code box in a module in the Divi Builder. You are probably trying to paste a code snippet you copied from a tutorial, but are getting the error. However, it is not possible to use a CSS selector within a module. That is because this module is already a selector. For example, the Text module CSS selector is .et_pb_text and this would be exactly the same selector as the Main Element box. Since the Main Element is already a selector, it would not be possible to add another selector within that one. The only possible code that you could write in this box would be CSS properties and values which would style the Main element, or in this case they would apply to .et_pb_text. For example, you could write “color: red;” in the Main Element CSS code box, but if you wrote “.selector {color:red;}” with the selector and curly braced it will not work.

The Solution

If you were facing this error in the Main Element of an Advanced tab of a Divi module, this is the wrong location for the code. You need to place the code either in the Divi>Theme Options> Custom CSS or in a child theme’s style.css file. Simply navigate to the backend of your website, hover over the Divi menu, and go to Theme Options. Scroll to the bottom, and you will see the Custom CSS box there, which is the correct location to place code like this with a selector.

How To Add css code to the Divi theme Options custom CSS

NOTE: If you were getting the Expected RBRACE error in the Divi Theme Options, it means you are missing a closing curley brace, so be sure that each of the code blocks end with “}“.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

Last updated Oct 10, 2023 @ 1:39 pm


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart