Custom bullet point help

[visby]

Hello, I’ve been looking at other people’s CSS snippets to customize their bullet points. I’ve stumbled across this code that changes the default bullet points to ‘»’ :

/* replace the default "bullet" with "chevron" icon, unset default bullet */
    :is(.cm-fold-indicator:hover,*) ~ .cm-formatting.cm-formatting-list .list-bullet::after,
    .list-bullet::after {
        content:'»';
        width: unset; height: unset;
        background-color: unset;
        box-shadow: none;
    }
    /* add text color and replace the collapsed state of the default like bg and box shadow */
    .is-collapsed ~ .cm-formatting-list .list-bullet::after,
    li.is-collapsed .list-bullet::after {
        color: var(--list-marker-color-collapsed);
        box-shadow: none;
        background-color: transparent;
    }

However, I want this code to only apply to the topmost-level unordered list. I’ve tried a bunch of times, but couldn’t quite get it to work the way I intended. How do I edit this code to achieve what I want?

[dawni]

I think this will take care of changing only the top-level bullet to your chosen character. It covers the collapsed and hover conditions too:

/* Replace the top-level default list bullet with "double-right-chevrons" symbol */
	.el-ul > ul > li > .list-bullet::after,
	.callout-content > ul > li > .list-bullet::after,
	.HyperMD-list-line-1 .list-bullet::after {
		content: '»';
		width: unset;
		height: unset;
		background-color: unset;
		box-shadow: none; /* Moved from a redundant selector */
	}

	/* Style for list marker inside callout content */
	.callout-content > ul > li::marker {
		content: '»  ';
	}

	/* Ensure proper styling when hovering and collapsed */
	.HyperMD-list-line-1:has(.collapse-indicator:hover) .cm-list-1 > .list-bullet::after {
		background-color: unset;
		box-shadow: none;
		color: var(--text-normal);
	}

	.el-ul > ul > li:has(> .is-collapsed) > .list-bullet::after {
		color: var(--list-marker-color-collapsed);
	}

	.HyperMD-list-line-1 > .cm-fold-indicator.is-collapsed ~ .cm-formatting-list .list-bullet::after {
		color: var(--list-marker-color-collapsed);
		background-color: unset;
		box-shadow: none;
	}

And for Source mode, if you want your custom bullet there too:

/* Replace the top-level default list bullet with "double-right-chevrons" symbol in Source mode */
	.markdown-source-view:not(.is-live-preview) .cm-formatting-list-ul.cm-list-1 + .cm-list-1::before {
		content:'» ';
		color: var(--list-marker-color);
	}

	/* Ensure proper styling when hovering and collapsed */
	.markdown-source-view:not(.is-live-preview) .cm-formatting-list-ul.cm-list-1 {
		display: none;
	}

	.markdown-source-view:not(.is-live-preview) .HyperMD-list-line-1:has(> .is-collapsed) > .cm-formatting-list-ul.cm-list-1 + .cm-list-1::before {
		color: var(--list-marker-color-collapsed);
	}

[visby]

Thank you very much