WIP: Specificity issue with custom CSS

[jonaswd]

I styled an element via the Bricks Editor and wanted to style the hover effect via Custom CSS.

This is the code generated for styles that come from the editor:

.brxe-mrksim .brxe-padvxu.brxe-block {
    background-color: var(--color-background-alt);
}

And this is the style generated when Using Custom CSS with the %root% variable:

.brxe-padvxu:hover {
    border-color: var(--color-primary-600);
}

So without using !important or manually adding the other Classes the style gets ignored.

Is this by design or a bug?

[Matej]

Hi @jonaswd,

you can try adding %root%.brxe-block as a selector instead.

Or, you can go to Bricks Settings → Performance and you enable the “Disable chaining element & global class”, then the .brxe-block class should not be there anymore. I suggest you do this, but go over your website style just in case

Best regards,
Matej

[jonaswd]

Hi @Matej,

I already did enable the option regarding chaining of classes a few days ago. I checkt on other elements and it did work and removed the chaining - it seems it did not in this case.

I regenerated the CSS files but this had no effect.

This element is inside a query. Maybe this has something to do with it?

[Matej]

Hi @jonaswd,

ok, so it’s not that this time. I’ve actually re-read the question, as it seems I missed something when reading it first time:

In your “generated” style when using custom CSS you are using border-color, but in the styles, that are generated from the editor, you have background-color. Those two are different, and should not affect one another.

If that’s not it, can you share a link to the website + a video showing the setup and the issue?
You can also copy-paste the relevant structure here, so I can test it locally. That would be nice

Thank you,
Matej

[jonaswd]

Hi @Matej,

sorry, I cleaned up the css styling and probably confused the background-color with border-color. Here is the structure:

This is the html of my query list:

<ul id="brxe-qqling" class="brxe-block glossar-query-list">
    <!--brx-loop-start-mrksim-->
    <li class="brxe-mrksim brxe-block" start-letter="A">
        <div class="brxe-cvsbkc brxe-shortcode" aria-hidden="true">
            <div class="az-heading">A</div>
        </div>
        <a href="#" class="brxe-padvxu brxe-block">
            <div class="brxe-bozlex brxe-block">
                <span class="brxe-dziqco brxe-text-basic">Acacia Senegal Gum Extract</span>
                <span class="brxe-xkyamt brxe-text-basic">Xanthan Bindemittel</span>
            </div>
            <div class="brxe-uugguu brxe-block glossar-list-icon-wrapper">
                <svg></svg>
            </div>
        </a>
    </li>
</ul>

Here is a screenshot of the Bricks navigator:

Now, the styling I applied via the Brickseditor (including the border) is set on the Card element. This is the generated CSS:

.brxe-mrksim .brxe-padvxu.brxe-block {
    background-color: var(--color-background-alt);
    border: 1px solid var(--color-brand-100);
    border-radius: var(--border-radius-m);
    font-size: var(--text-s);
    line-height: 1.3;
}

For some reason even the parent class (this would be the li element) is included here.
The hover state I wanted to define via custom CSS like this:

but the CSS in the frontend looks like this:

.brxe-padvxu:hover {
    border-color: red;
}

so obviously the specificity is not enough to have any effect.

Hope I didn’t miss anything this time.

[Matej]

Hi @jonaswd,

Thank you for all. It’s a bit clearer now, but I still don’t know which controls you changed that generated that CSS.

I suggest you do one of those two. Second one is ideal

1. Right click on the “Liste” element, and paste the content (JSON) directly here in the forum (wrap it with preformatted text). That way, I will be able to paste the same structure into my installe and debug it there.
2. Send temporary login credentials to your website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so I can take a look.

Thank you,
Matej

[jonaswd]

Hi @Matej,

sure. I would gladly provide you with access – at this moment there is developing going on so if the JSON doesn’t work, tomorrow I can provide you access to my staging environment.

Here is the JSON:

{"content":[{"id":"qqling","name":"block","parent":"jlvbcc","children":["mrksim"],"settings":{"tag":"ul","_cssCustom":"#brxe-qqling .az-heading {\n\tfont-size: var(--heading-l);\n  font-family: var(--font-fam-serif);\n  color: var(--color-heading);\n  display: block;\n  padding-top: var(--space-xs);\n}\n\n#brxe-qqling {\n\tlist-style: none;\n}","_rowGap":"var(--space-2xs)","_padding":{"left":"0"},"_cssClasses":"glossar-query-list"},"label":"Liste"},{"id":"mrksim","name":"block","parent":"qqling","children":["cvsbkc","padvxu"],"settings":{"hasLoop":true,"query":{"objectType":"post","post_type":["glossar"],"order":["asc"],"posts_per_page":"24","infinite_scroll":true,"ajax_loader_animation":"default","infinite_scroll_margin":"900","orderby":["title"]},"_attributes":[{"id":"ngsfnq","name":"start-letter","value":"{acf_glossar_letter}"}],"tag":"li","_cssCustom":"#brxe-mrksim a.brxe-padvxu,\n#brxe-mrksim a.brxe-padvxu .glossar-list-icon-wrapper {\n  transition: all var(--tran-du-s) var(--tran-type-smooth-m);\n}\n#brxe-mrksim a.brxe-padvxu:hover {\n\tborder-color: var(--color-primary-600);\n  box-shadow: 0 0 0 2px var(--color-primary-200);\n}\n#brxe-mrksim a.brxe-padvxu:hover .glossar-list-icon-wrapper {\n  color: var(--color-primary-600);\n}"},"label":"Item"},{"id":"cvsbkc","name":"shortcode","parent":"mrksim","children":[],"settings":{"shortcode":"[sl_letter_divider]","_attributes":[{"id":"tsfexj","name":"aria-hidden","value":"true"}]},"label":"Letter Heading"},{"id":"padvxu","name":"block","parent":"mrksim","children":["bozlex","uugguu"],"settings":{"tag":"a","link":{"type":"meta","useDynamicData":"{post_url}"},"_background":{"color":{"raw":"var(--color-background-alt)"}},"_border":{"width":{"top":"1px","bottom":"1px","right":"1px","left":"1px"},"style":"solid","color":{"raw":"var(--color-brand-100)"},"radius":{"top":"var(--border-radius-m)","right":"var(--border-radius-m)","bottom":"var(--border-radius-m)","left":"var(--border-radius-m)"}},"_typography":{"font-size":"var(--text-s)","line-height":"1.3"},"_padding":{"top":"var(--gap-xs)","right":"var(--gap-xs)","bottom":"var(--gap-xs)","left":"var(--gap-xs)"},"_display":"flex","_direction":"row","_flexWrap":"nowrap","_alignItems":"center"},"label":"Card"},{"id":"bozlex","name":"block","parent":"padvxu","children":["dziqco","xkyamt"],"settings":{"_direction":"column","_flexGrow":"1"},"label":"Text"},{"id":"dziqco","name":"text-basic","parent":"bozlex","children":[],"settings":{"tag":"span","text":"{post_title}","_typography":{"font-weight":"600"}}},{"id":"xkyamt","name":"text-basic","parent":"bozlex","children":[],"settings":{"tag":"span","text":"{acf_glossar_title_human}","_typography":{"color":{"raw":"var(--color-text-faded)"},"font-style":"italic"}}},{"id":"uugguu","name":"block","parent":"padvxu","children":["jcjjil"],"settings":{"_flexShrink":"0","_width":"auto","_cssClasses":"glossar-list-icon-wrapper","_typography":{"color":{"raw":"var(--color-brand-300)"}}},"label":"Icon Wrapper"},{"id":"jcjjil","name":"icon","parent":"uugguu","children":[],"settings":{"icon":{"library":"custom_set_unywoeijq","svg":{"id":1342,"icon_id":"icon_9lkmjlts5","url":"/wp-content/uploads/arrow-right.svg"},"height":"1.5em","width":"1.5em","strokeWidth":"1.5","stroke":{"raw":"currentColor"}}}}],"source":"bricksCopiedElements","sourceUrl":"/","version":"2.1.3"}

[Matej]

Hi @jonaswd,

thank you so much for the JSON structure. I was able to replicate the issue locally now, and I’ve created an internal bug task.

As a workaround, it will work if you add a custom :hover selector via UI.

Once the issue is fixed, we will update this topic.

Thank you,
Matej