Way to style element on a per element basis?

Custom CSS & Theme Design
1

What I’m trying to do

Implement custom stylings for certain elements on a note. Use certain CSS stylings on specific elements.

For example, I want to make only certain table to occupy the entire readable width of the note, while others are normal; I want some images to float on the right side of a text, while others are centered as normal, and others are organized into an image masonry, preferably in preview mode.

Things I have “tried”

I’ve seen CSS snippets, but they seem to be applied per note. I also saw this way (on “How do i center a single especific table per note?” topic I can’t link), but it seems clunky as it uses tags for styling. I’ve only used Obsidian for 2 months in a pretty normie way, and I’m not proficient in CSS.

Is there a better way to do it? Is there a plugin that allows per element styling?

I wonder if there’s a way to mark each element to use a specified-on-the-note CSS class (not using tags), it would be enough for me.

3

The solution was custom callouts (as that post said).

I thought it would be harder, but I’m making them and it’s quite simple tbh (mainly because I knew Sanctum theme had a similar feature (credit to @ SlRvb on github))

Here’s the aside custom callout styling I’ve made (heavily inspired by Sanctum’s).

.callout[data-callout~="aside"] {
    background-color: hsla(from var(--background-primary) h s calc(l + 5) / 0.8);
    position: relative;
    clear: both;
    display: block;
    max-width: 50%;

    /*by default it is "right inside"*/
    float: right;
    margin-left: var(--size-4-3);
    margin-right: 0px;

    --move: 0%
}

.callout[data-callout~=aside][data-callout-metadata~="+"] {
    --move: -10%
}

.callout[data-callout~=aside][data-callout-metadata~="++"] {
    --move: -20%
}

.callout[data-callout~=aside][data-callout-metadata~="+++"] {
    --move: -30%
}

.callout[data-callout~=aside][data-callout-metadata~="++++"] {
    --move: -40%
}

.callout[data-callout~=aside][data-callout-metadata~="+++++"] {
    --move: -50%
}


.callout[data-callout-metadata~="outside"] {
    float: right;
    margin-left: 0px;
    margin-right: calc(var(--move) - var(--size-4-3));
}

.callout[data-callout-metadata~="left"] {
    float: left;
    margin-left: 0px;
    margin-right: var(--size-4-3);
}

.callout[data-callout-metadata~="left"][data-callout-metadata~="outside"] {
    float: left;
    margin-left: calc(var(--move) - var(--size-4-3));
    margin-right: 0px;
}

/* Fixing padding and removing title if not "named" */

.callout[data-callout="aside"]:not([data-callout-metadata~="named"]) {
    padding: var(--size-4-2);
}

.callout[data-callout="aside"]:not([data-callout-metadata~="named"])>.callout-title {
    display: none;
}

.callout[data-callout="aside"]:not([data-callout-metadata~="named"])>.callout-content {
    padding: 0px;
}

.callout[data-callout="aside"]:not([data-callout-metadata~="named"])>.callout-content>p {
    margin-block-end: 0px;
    margin-block-start: 0px;
}

the syntax is as follows:

> [!aside|<metadata>]
> content

where <metadata> = [left|right] [inside|outside [+ to +++++]], and the default is equivalent to right inside (with zero pluses). Each plus pushes the callout 10%-of-the-parent-element further from the readable line length margin.

4

It only applies the aside on reading mode.

I testes it in Default, Minimal and Border themes, it behaves well in them.

5

Little Correction.
the syntax is as follows:

> [!aside|<metadata>]
> content

where <metadata> = [left|right] [inside|outside [+ to +++++]] [named], and the default is equivalent to right inside (with zero pluses and unnamed). Each plus pushes the callout 10%-of-the-parent-element further from the readable line length margin.