I’m usually pretty good at being able to target specific things with CSS, but I’m having a real bear of a time with this one.
My situation - I’m designing a page that needs some text to be white on a dark background and some to be black on a lighter background. My default text is black and I’m trying to target p and ul li elements within a text editor block that I’ve given a class of ‘contrast’.
I’ve tried every method I could find to target those elements, but nothing is working - I’m hoping you might have some insight. I was mildly surprised to see that the class applied further up the DOM than expected, but I can understand that it probably gives more flexibility.
I’m using BB with Genesis and Dynamik and have been putting all my CSS in the Dynamic Custom area, if that matters.
Here’s a Dropbox link to an image showing the element I’m trying to target - it’s the last <p> and subsequent ul li elements.
Thanks for getting in touch! Rather than having to write custom CSS for this, you can change the text color of text within columns really easily. If you click on the little book icon in the module editing toolbar, it will give you access to the column settings to where you can apply a specific text color. This is also true of rows if you want to target more than one specific element in any given row. Let me know if that helps!
Hi Keith,
It can happen that your custom CSS is not working because of other styles with higher specificity are dominating the rule. You could try with !important before the semicolon for testing purposes. If that works you at least know that you targeted the element correctly. And if it works you need to have the right specificity to give enough weight to your custom rule. One way to higher the specificity is self-chaining the class. You can google for that and will find a lot of information.
I can do that and it works, but it then changes all my black text on the page to white. I need to be able to target specific text editor elements (or ones that exist in a column) to make the text white, while leaving all the other text within the same element structure (column>text editor) black.
I thought by giving the text editor element or the column element it’s within a class of ‘contrast’ I’d be able to target the elements within them, but the nested divs with multiple classes have thrown me for a loop.
Hi Leo - I wanted to reply to your last post about ‘you can give a class to that specific element in Beaver Builder which might be the easiest way’, as there’s are a few things anyone using BB should know, especially when it’s used in conjunction with Genesis/Dynamik.
I noticed that, when you give a class to a specific element in BB, it actually appends that class higher up in the DOM than expected. If you look at the image in the Dropbox link I gave, I would have expected the class I gave the specific text element to append to the ‘fl-rich-text’ class, however it appended it two divs higher up, to the one with mulitple classes ‘fl-module fl-module-rich-text fl-node-55144089195a7’ (contrast was the class I gave the text element).
Just something others should be aware of. Also, with Dynamik, it has it’s own classes applied to content that are more specific than the BB classes, which is why I ran into the problem.
Hopefully this thread will help others should they run into the same issue.
I wanted to bump this up again, as I’m doing another site and running into the same issue with the BB plugin. If I give an element a specific class or ID, BB is appending that class or ID several nodes up the DOM, so the CSS I’m trying to use to style a specific element isn’t working as intended.
I’ve read all the related posts and understand what specificity means - I’m curious is there’s a reason that the class/ID is appended higher in the DOM, rather than to the specific element the class/ID is being added to?
I’m on a super tight schedule at the moment, but I’m going to try to find time to post some specific examples of what I’m referring to. I’d really like to wrap my head around this one and/or get you to consider other ways of doing this that make it easier to style specific elements.
Nope. Still having the same issue, but I’ve been too busy to document it and ask for further support/clarification or some kind of fix/change to how BB works.