Apply custom CSS to selected text

  • I would like to be able to define some css to be applied to text I select within a block.
    For example, whenever I provide a link that opens in a new tab / window I always add the text: (opens in a new tab / window)
    I’d like to be able to select that text and then add a pre-defined css class from my Additional CSS in the Customizer. To be clear, I don’t want to apply it to the whole block, just to the selected text.
    I know I can use the edit html option but I wan’t a quicker way.
    Being able to quickly select some text and then apply a css class would be so much easier than going in via html.
    Is it possible?

    • This topic was modified 2 years, 3 months ago by hightonridley.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    TBH, maybe the simplest way forward is to wrap the text in <span> tags with a distinct class attribute. Then your CSS can directly target that class regardless of surrounding context.

    If that’s an untenable solution, you might be able to target the text with advanced CSS selectors like [attribute=value] or :nth-child(). But to do so, the text needs to be within an element. You cannot target text alone with CSS. So you may need <span> tags even if you can avoid class attributes.

    You might instead consider implementing the text as an :after pseudo-element. Then it’ll surely be related to an element and can be styled accordingly.

    Thread Starter hightonridley

    (@hightonridley)

    Thanks for those suggestions @bcworkz.
    I was hoping that, just like being able to highlight selected text with a colour via the block’s rich text drop down, there was a similar way to apply my own styling.
    If I use my browser’s inspector, selected text that’s been highlighted in that way gets:
    <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-medium-pink-color">my screen</mark>
    Ideally I’d be able to apply my own class in the same way.

    Thread Starter hightonridley

    (@hightonridley)

    After posting my reply to @bcworkz I got thinking about the classes added when highlighting with the block’s rich text drop-down. This is an example:
    <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-bright-blue-color">(opens in a new tab / window)</mark>

    In my Customizer, I added a definition of:
    .has-bright-blue-color {font-size: smaller;}
    to my Additonal CSS and it worked!
    Ok, it’s not what I’d call the right way but now I highlight the text, use the block’s rich text drop down, choose A Highlight and then choose the bright blue colour. When I preview and publish, sure enough, that text has the bright blue colour and also has a reduced font size.
    So maybe I’ll stick with that approach unless anyone can give me a good reason that it’s not a good idea.

    • This reply was modified 2 years, 3 months ago by hightonridley.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Apply custom CSS to selected text’ is closed to new replies.

Tags