versus tags | How to manipulate in WordPress?

  • Resolved Spright

    (@spright)


    4 years ago

    As far as I know (absolute beginner), images are automatically wrapped by <figure> tags in WordPress.

    This creates a problem with custom CSS. It took me now hours of fiddling with my browser’s element inspector to realise that the reason my custom CSS didn’t affect my image was that the custom class name that I gave the image in Gutenberg applied to the <figure>, but not to the .

    In the source code, the had a generic class name: .wp-image-155.

    How can this be addressed? How can I apply any custom CSS to an image, if the image obtains a generic class that is not known to me? Surely the solution is not looking at the source code every time, right…?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Zack Krida

    (@zackkrida)

    Hi Spright! Great question; this is less-specifically an issue of WordPress and more one of CSS selection. You could target all images wrapped in figure elements in a number of ways in CSS. Here’s some examples:

    
/** All images directly contained in figures **/
figure > img {
  border: 2px solid blue;
}

/** All images with a classname matching ".wp-image-*" **/
img[class^="wp-image-"] {
  border: 2px solid red;
}
    • This reply was modified 4 years ago by Zack Krida.
    • This reply was modified 4 years ago by Zack Krida. Reason: css typos; oops!

    this is less-specifically an issue of WordPress and more one of CSS selection.

    100% true.

    In addition to the code suggested by Zack, you SHOULD be able to style your images with your custom CSS class even though it’s applied to a parent figure element (instead of the img tag).

    If your code is not working, it means your CSS selection is not specific enough, and something else is overriding your selection.

    If you can share your code and a link to the page in question, we could let you know why the core isn’t working and give you a working code.

    Thread Starter Spright

    (@spright)

    Interesting workaround. Thanks Zack.

    Zack Krida

    (@zackkrida)

    @spright sure thing! I forgot to mention, you could also simply do .your-custom-class-name img or .your-custom-class-name > img to target the images and continue to use your custom class, if desired.

    Please mark this topic as ‘resolved’ if you don’t need any further help. Cheers!

    Thread Starter Spright

    (@spright)

    Thanks y’all, that was helpful.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘versus tags | How to manipulate in WordPress?’ is closed to new replies.