I feel like I’m missing something basic about how to use selectors. Let’s say I’ve targeted a text box on my page and made a selector, naming it “fancy body text” with my preferred styles and colors. I then scroll further down the page and realize there’s a second box of text that I’d like to style with the “fancy body text” selector. How do I do that?
If I target or double-click the second text box, I’m only seeing options to create a new selector. Can I target an element and apply an already made selector to it?
In the Microthemer interface, if you hover over the Help menu item and then click the Targeting video option, you can learn about Microthemer’s targeting options, including how to target multiple elements with one selector.
Microthemer suggests alternative selectors that target related elements on the page. One of these options will be suitable in most cases, but if you find that Microthemer doesn’t suggest a selector that targets the two boxes in question, you have two options. Both involve a bit of custom code:
Expand the advanced targeting options by clicking the show advanced link while in targeting mode.
Target the second box by clicking it.
The default selector at the top of the list (on the right) will be a selector that targets just that box. Copy the selector code.
Exist targeting mode without creating the selector.
Finally, click the name of the ‘fancy box text’ selector in the top toolbar to reveal the quick edit options
Append the code you copied after the current code, separating the two pieces with a comma e.g. .original-selector, .second-selector
You can comma separate however many selectors you like: 2, 3, 5, 10 etc. But it’s preferable to use one of MTs suggestions if possible. This leads us on to option 2
Option 2 – Updating the HTML with custom classes
If you have the know-how to update your theme’s HTML, you can add a common class to elements on the page that you want to apply the same styling to. So for instance, you could add class=”.fancy-box” to all HTML elements that should have the “fancy box” styling. Of course this requires some understanding of HTML code. But if you use a page builder like Beaver Builder, it is possible to add custom classes to chunks of content (modules) via the Advanced settings. So you would just enter fancy-box into an input field.
I hope my answer helps a bit. Please feel free to share a link to your site if you need more specific guidance.
Just popping in to say, thanks Sebastian – this was helpful to me (hopefully for Kyle too). I didn’t realize that targeting video was there, I appreciate it’s attention to detail and slower pace.
