NO BUG: Bug when using the CSS selection [class^=]

Bugs
1

There is a bug when using the selector [class^=] on latest version of Brick Builder. The bug doesn’t appear on page build with Gutenberg, only on pages build with Bricks.

REPRODUCING THE BUG
• Using a virgin install of WordPress 6.6.2 + Bricks Builder v1.11.
• Create a new page on Bricks Builder.
• Create a basic Section + Container + Heading.
• Apply the class “.xxx” on the Heading.

PROBLEM
• Either of these two CSS will work fine:
.xxx { border: 5px solid red; }
OR
[class*="xxx"] { border: 5px solid blue; }

• But neither of these two CSS will work (even if it should):
[class^="xxx"] { border: 5px solid green; }
OR
[class="xxx"] { border: 5px solid violet; }

• All these 4 classes work fine when applied on a basic “not bricks” Gutenberg page.

FOR INFO
*= select all class that contain the string “xxx”.
^= select all the class that start with the string “xxx”.

=> Is anyone able to reproduce this bug?

2

I confirm the bug.

The bug appears on ALL Bricks website that I’ve tested.

Bricks always manage this selector correctly:
[class*=]

But most Bricks pages are unable to manage at least one of these selectors:
[class^=]
[class$=]
[class=]

Typically, all these websites encounter a bug with at least one of these selectors:

https://wellbodyems.pl/
https://getframes.io/
https://heroicsignatures.com/

On the contrary, basic site like [www.wikipedia.org] are able to manage all of these selectors normally.

Even stranger

The official Bricks website [https://bricksbuilder.io/] DO encounter the same bug… BUT NOT on the top banner (the one currently saying [Bricks user survey 2024 & giveaway is now live]).

The website does bug, EXCEPT on the banner itself, that is able to manage all the 4 selectors normally.

See attached image.

Bug with CSS selector
Bug with CSS selector1920×1370 198 KB

3

Hi @asyxreds,

I’ll mark this as a no-bug, because that’s just how the attribute selector works, and it’s not affected by Bricks itself.

So, let’s get over the not working selectors.

The following selector will actually select all elements, where class attribute starts with xxx. We both agree on that.

[class^="xxx"] {
  border: 5px solid green;
}

But, if you check how the heading element in your example looks, you will see that in fact, it does not start with xxx, but it starts with brxe-..... So, the selector will not select this element.

image
image882×172 21.8 KB

To confirm that, change the selector to

[class^="brxe"] {
  border: 5px solid green;
}

and you will see that it actually works. Well, it will select all elements, but the point stands.

The same reason is for this selector, which you said does not work. Sure, it’s not working, but not because there is a bug in Bricks. Just the selector is wrong, for the class attribute that Bricks outputs.

[class="xxx"] {
  border: 5px solid green;
}

To test this, open developer tools, and remove that brxe-heading class from the element, and the selector will work.

You can check here, for a nice description of what all of those attribute selectors do: Attribute selectors - CSS: Cascading Style Sheets | MDN

Best regards,
Matej

4

Dear Matej,

Thank you a lot for taking the time to check. You’re absolutely right, I was wrong. My apologies.

My knowledge about the selector [class^=“xxx”] was incorrect.

I naively thought that such selectors would catch both of these “div” (but in reality, this selector will catch only the second one):

1) <div class="brxe-heading xxx-aaa">
2) <div class="xxx-bbb brxe-heading">

In fact, I was hoping that such selector, [class^=“xxx”], would be able to catch ALL the “xxx.???” classes, NO MATTER THE ORDER IN WHICH THEY APPEAR, but indeed, that’s not how this selector work.

Again, thanks for the time you spent verifying.
I learned something thanks to you :+1:

1 Like