Child selectors in custom CSS

Daniel Klotz

• January 12, 2021 09:33

Hey guys,

when adding some custom css and using the child selector syntax (may others as well), the css is not being applied/included in the markup.

i.e. a rule like this is not working

.brz-section .brz-section__content > .brz-bg > .brz-bg-image

without the brackets, the rule will do but this is not the same and yield unexpected results.

 

1

• 

  Alex

  • January 12, 2021 22:55

  Hi,

  try adding a custom class to each item and use child selectors only for your custom class, not for Brizy classes.

  0
• 

  Daniel Klotz

  • January 13, 2021 08:05

  Hey Alex,

  thanks for your reply.

  Well yes, but this is not always possible for certain DOM elements due to the nested markup that brizy generates.

  So this is not really a helping workaround.

  Can you confirm this bug?

  1
• 

  Alex

  • January 15, 2021 11:44
  • Edited

  Hi,

  Not sure it's a bug. I will open an internal issue and we will do some tests with devs. If it turns out to be a bug, we will fix this.

   

  0
• 

  A G

  • August 02, 2021 23:11

  But it also looks like :after selectors don't even work at all....

  0
• 

  Denis B

  • August 03, 2021 08:49
  • Edited

  Hi,

  I have tested code you tried to use and this works: View screenshot. The problem is that you used "last-child" pseudo element for the wrong class. You can try to use this code:

  .brz-menu__ul > .brz-menu__item > a:after {
     padding-left: 20px;
     content: " | ";
  }
  
  .brz-menu__ul > .brz-menu__item:last-child > a:after {
     content: " ";
  }

  Best regards,
  Denis.

  0

Please sign in to leave a comment.