Fix Case: Elementor Custom Class Not Working Because of Colon (:) Character

🪛 Project Background

While working on an Upwork project, the client wanted to apply a custom style to a specific section in Elementor.
They added a custom CSS class named jtg:header-new inside the Elementor settings panel.

To ensure proper functionality, we must take steps to Fix any underlying issues.

By following the guidelines outlined, we can effectively Fix the custom class problem.

Identifying the issue will allow us to Fix it promptly and prevent future occurrences.

To address this issue, we need to Fix the custom class configuration.

Everything looked fine in Elementor, but the style didn’t apply on the live site — no matter what CSS rule we wrote.

---

🔍 The Problem

When Elementor outputs a class like jtg:header-new, it appears exactly like that in the HTML:

<div class="elementor-widget jtg:header-new">

However, in CSS, the colon : has a special meaning — it’s used for pseudo-classes (like :hover, :before, etc.).
So when we write:

.jtg:header-new {
  background-color: red;
}

Understanding the root cause is essential to Fix the display issue.

the browser actually reads it as:

“Target an element with class jtg, then apply styles to its pseudo-element header-new”
…which doesn’t exist.
That’s why the CSS rule never works.

---

💡 The Solution

There are two correct ways to make the browser recognize the class properly:

By escaping the colon, we can Fix the CSS rules effectively.

✅ Option 1: Escape the colon

Use a backslash \ before the colon when writing your CSS selector:

.jtg\:header-new {
  background-color: red;
}

This tells the browser:

“Hey, that colon is part of the class name, not a pseudo-class.”

This is the cleanest and most common solution.

---

✅ Option 2: Use attribute selector

This method allows us to Fix the issue without complicated workarounds.

Alternatively, you can target it by its full class name:

[class~="jtg:header-new"] {
  background-color: red;
}

This method also works perfectly and is sometimes clearer when working with dynamically generated class names.

---

Learning from these challenges helps us Fix similar problems in the future.

🧠 Lesson Learned

When working with Elementor or any page builder, avoid using special characters in your CSS class names — especially:

Ultimately, the goal is to Fix any CSS issues swiftly and efficiently.

Remember, the key to success is to consistently Fix errors before they escalate.

:  #  .  [  ]  (  )  >  +

If you do use them (for project-specific reasons), remember to escape them properly in your stylesheet.

---

💬 Personal Note

This issue looked simple at first but took a few minutes to identify because the HTML looked perfectly fine.
Once I realized the colon was the culprit, escaping it solved the problem instantly.

Another Upwork lesson: always inspect the HTML output before assuming CSS is broken.

---

🔗 Tools Used

• Elementor Pro (Page Builder)
• Chrome DevTools (to inspect and test selectors)
• Code Snippets plugin (for quick CSS testing)