# How do I style codeblocks and inline-code in Callouts only? **URL:** \ **Category:** Devs: Theme Design & Custom CSS\ **Tags:** callouts, custom-css\ **Created:** [May 13, 2026, 8:41am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198 "2026-05-13T08:41:15Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![julia122](https://forum.obsidian.md/user_avatar/forum.obsidian.md/julia122/32/93253_2.png) [@julia122](https://forum.obsidian.md/u/julia122)\ **Post date:** [May 13, 2026, 8:41am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/1 "2026-05-13T08:41:15Z")
Hello, sorry if this is the wrong topic to post this to but has anyone here figured out, how to style codeblocks and inline-code in Callouts only while not styling any code outside of Callouts? I checked inspect element but they seem to have the same selectors as normal inline-code/codeblocks. I tried it myself but everything I have tried so far either didn’t change anything or changed all codeblocks even the ones outside of callouts. My knowledge of CSS is too little to actually figure this out myself, I believe. Could anyone maybe tell me both? - How to style codeblocks and inline-code in Callouts only (live preview and reading view)? - How to style codeblocks and inline-code in Callouts for a customclass you add to the frontmatter ( the `cssclasses` in the properties section/YAML). For example: `cssclasses: helper`. Also for live preview and reading view. ---
**Author:** ![Zodian](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/ad7895/32.png) [@Zodian](https://forum.obsidian.md/u/Zodian)\ **Post date:** [May 13, 2026, 8:52am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/2 "2026-05-13T08:52:07Z")
You can target callouts in obsidian with `.callout {}` CSS class. However, you will need a basic unterstanding of selectors and combinators to achieve what you want. Then you can target everything within a callout. ---
**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\ **Post date:** [May 13, 2026, 8:52am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/3 "2026-05-13T08:52:14Z")
This is the right category! What kind of styling are you looking to do? If you share that, folks will have a better idea of what direction to point you in, suggestions, etc. ---
**Author:** ![julia122](https://forum.obsidian.md/user_avatar/forum.obsidian.md/julia122/32/93253_2.png) [@julia122](https://forum.obsidian.md/u/julia122)\ **Post date:** [May 13, 2026, 10:08am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/4 "2026-05-13T10:08:14Z")
Thanks, but “`.callout {}`” only targets the whole callout container. I was asking specifically about inline code and codeblocks inside callouts. For anyone else looking for the same thing, these selectors worked: ```css .callout .callout-title-inner code { /* inline code in the callout title */} ``` ```css .callout .callout-content code { /* inline code in the callout body */} ``` ```css .callout .callout-content pre { /* codeblock container */ } ``` ```css .callout .callout-content pre code { /* code text inside the codeblock */ } ``` ```css .callout .callout-content pre button.copy-code-button { /* copy button inside the codeblock */} ``` * * * Or for a custom class I just did this and it worked: ```css .workspace-leaf-content:has(.helper) .callout-content code { } ``` ```css .workspace-leaf-content:has(.helper) .callout-content pre { } ``` ```css .workspace-leaf-content:has(.helper) .callout-content pre code { } ``` ---
**Author:** ![Zodian](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/ad7895/32.png) [@Zodian](https://forum.obsidian.md/u/Zodian)\ **Post date:** [May 13, 2026, 10:23am UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/5 "2026-05-13T10:23:42Z")
> [@julia122](#): > > Thanks, but “`.callout {}`” only targets the whole callout container. I was asking specifically about inline code and codeblocks inside callouts. Yes and I pointed you towards CSS combinators which you have used in your examples to target specific elements within a callout. ---
**Author:** ![julia122](https://forum.obsidian.md/user_avatar/forum.obsidian.md/julia122/32/93253_2.png) [@julia122](https://forum.obsidian.md/u/julia122)\ **Post date:** [May 13, 2026, 5:01pm UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/6 "2026-05-13T17:01:30Z")
I understand that combinators are the general concept involved, but the missing piece was Obsidian’s specific callout DOM structure. “.callout {}” only targets the whole container, while the useful selectors were “.callout-title-inner code”, “.callout-content code”, “.callout-content pre”, and “.callout-content pre code”. That distinction was the actual issue, especially because inline code in the callout title for example is outside “.callout-content”. ---
**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\ **Post date:** [May 20, 2026, 5:01pm UTC](https://forum.obsidian.md/t/how-do-i-style-codeblocks-and-inline-code-in-callouts-only/114198/7 "2026-05-20T17:01:34Z")
Closed on May 20, 2026, 5:01pm UTC This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.