How can I add a selector to a selector. [add target elements to active selector]

Tagged: ,

Author Posts

bonest May 25, 2017 at 2:09 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi

I have created a selector and named it Buttons.

Now when ever I stumble over a plugin that has its own styling I would like to add the necessary selectors to my existing Buttons selector, so they all share the same styling.

Sebastian May 26, 2017 at 2:44 pm

Hey Bonest,

We will probably add a pure GUI method for this soon. But currently, you will need to manually edit your Buttons selector. Please try the following steps:

  1. Navigate to your Buttons selector
  2. Click the name of the selector “Buttons” in the top toolbar to reveal the CSS code editing options.
  3. Type a comma and space at the end of the selector (the blue Code field): “, “
  4. Double-click the additional button you want to target, to lauch MTs targeting mode
  5. Click the ‘Show advanced‘ link in the top toolbar
  6. Copy the CSS code from the first input field in the column on the right (Targeting options). Or a another input field that suggests a selector that targets more than just the single button you double-clicked
  7. Click the Target button to close targeting mode
  8. Paste the code you copied into the blue code field you added a comma to, just after the “, “.
  9. The end result will be something like “.original-selector, .another-selector“
  10. Click the SAVE SELECTOR button to save your change.
  11. Your selector will now target the additional button.
  12. You can repeat this process as often as you like, adding more and more comma separated CSS selectors

Note, a better way to target multiple elements is to choose a selector that targets common elements, or elements that share a common class or ancestor. E.g. if all buttons had the class ‘button’ you could target them all by choosing this option from MTs targeting suggestions:

.button

But of course it isn’t always feasible to add your own custom classes to the HTML content WordPress produces. Especially if the buttons come from plugins. In which case, the comma separated selector approach described above is your best bet.

I hope that helps. Please let me know if you need further assistance with this.

Cheers,
Sebastian

You must login or register to reply to this topic.