Add CSS class to empty paragraphs

From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.

In the future, you might use a pure CSS solution like this one.

p:has(> br[data-cke-filler="true"]) {
    /* styles here */
}

For now, you either have to style the
directly. Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.

br[data-cke-filler="true"] {
    /* styles here */
}

And if you are able to run javascript in ckeditor. This can easely be done today.

Examples : with jQuery

$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );

or

$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );

Example : with Native Javascript

var brs = Document.querySelectorAll("br[data-cke-filler="true"]");

brs.forEach(function(br) {
  br.classList.add("MyEmptyParagraphsClass");
});

In CKEditor 4, you can have a configuration file.

And you can add the custom config with the options here.

In your case, you might need these options :

config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.

Meanwhile in CKEditor 5, you can try these documentations about Block Widget :

• Adding a css class to block elements
• Inline and block content