Exclude Specific Blocks from CSS code for underlined links

Hi Steph,

You can add excluded-blocks on the section container's Additional CSS class(es) field and then modify .entry-content part of your CSS selector to .entry-content *:not(.excluded-blocks)

Example:

from .entry-content ul a:hover to .entry-content *:not(.excluded-blocks) ul a:hover.

Thanks. Just gave it a try, but for some reason it does not work.

Any ideas what could be causing the problem?

*Edit* And yes... I did clear my cache 😉

Did you include the excluded-blocks class to the container block you wish to exclude?

That is crucial in making things work.

Can you keep it css class on the blocks and let me have a look?

I did.
(Image attached in private information area so you can check if I somehow messed this part up without realizing it)

The code is now:

.entry-content *:not(.excluded-blocks) p a:link {
  background-color: base-2;
    color: base-2;
  background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
    background-size: 0% 4px, 100% 7px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.1s ease-in-out;
    background-repeat: no-repeat;
    padding-bottom:0px;
}

.entry-content *:not(.excluded-blocks) p a:hover{
   color: base-2;
   background-size: 100% 6px;
   background-color: base-2;
}

.entry-content *:not(.excluded-blocks) p a:link {
color: base-2;
    text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
}

.entry-content *:not(.excluded-blocks) ul a:link {
  background-color: base-2;
    color: base-2;
  background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
    background-size: 0% 4px, 100% 7px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.1s ease-in-out;
    background-repeat: no-repeat;
    padding-bottom:0px;
}

.entry-content *:not(.excluded-blocks) ul a:hover{
   color: base-2;
   background-size: 100% 6px;
   background-color: base-2;
}

.entry-content *:not(.excluded-blocks) ul a:link {
color: base-2;
    text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
}

I don't see it being applied on the front-end.
https://share.getcloudapp.com/rRuNpG8v

Perhaps I'm looking at the wrong site or page. Is this for the home page of anomadspassport.com (not the staging site)?

That's weird. It is the home page.

Just noticed that is way also causes a whole bunch of issues with other blocks even if they have no additional CSS class.
The issue vanished again the very second I removed the *:not(.excluded-blocks) part...
It made the line under other links disappear

See:https://www.anomadspassport.com/christmas-markets-in-europe/
The external link under Berlin is underlined
The external link under Cologne is not
And I have no idea why...

The Container block nesting should be fixed as well.

The Headline Blocks "Featured Guide" and the Grid Block with 3 columns under it should be placed on the same Container Block.

This should be done on "Bucket List" and the Grid Block w/ 3 columns under it as well.

You then add the class on the Container blocks that holds both the headline and the grid blocks. :D