I’m wanting to override the default styling of completed tasks. I want them to not have a strikethrough.
The original scss code is here. So I added this space-style:
/* priority: 1 */
.cm-task-checked,
.sb-line-task:has(.cm-task-checked) .sb-wiki-link {
text-decoration: none !important;
color: #eee;
}
The color works fine upon a reload. However, the strikethrough remains. Is it possible to override the built-in css here?
Thank you, works very nicely! Learned a bit about css with this :).
CSS question: so in my rudimentary understanding of CSS, your solution worked was able to override the built-in CSS where mine didn’t because yours had a higher specificity.
Question: is it possible to override the in-built CSS without relying on specificity?
YES and NO.
Technically you don’t always need to add all the selectors.
Some CSS selectors work some might not, because their hierarchy or how these selectors are constructed and styled.
here is a simplified example:
<div class="wrapper">
<div class="element1"></div>
<div class="element2"></div>
</div>
.wrapper.element1 {
color: red;
}
.element1 {
color: green;
}
.wrapper.element1: This is a compound selector. Because there is no space between the two classes, CSS is looking for a single HTML element that has both classes at the same time (e.g., <div class="wrapper element1">).wrapper on the parent and element1 on the child, the first rule fails to match anything..element1, which matches your HTML perfectly and turns the text green.If you had put a space (.wrapper .element1), the first rule would have won because it would be more “specific.”
The Concept of Specificity (The “Weight” of Selectors)
Browsers use a scoring system to decide which CSS rule “wins” when multiple rules target the same element.
.element1 has a score of 10..wrapper .element1 has a score of 20.#my-id has a score of 100.If you want to override a style without using !important, you “add more selectors” to increase the weight of your rule.
.a.b (No space): Target an element that has both class A AND class B..a .b (With space): Target an element with class B that is inside an element with class A.No, you don’t always need all selectors because of Inheritance. If you set font-family on the .wrapper, you don’t need to define it again for .element1 and .element2. They “inherit” the style from their parent automatically.
Yes, you should avoid being too specific.
body div.wrapper section.content div.element1 (Too long, hard to read, and slow for the browser to parse)..element1 or .content-element (Clean, reusable, and fast).| Selector | Meaning |
|---|---|
.element1 |
Any element with class element1 |
.wrapper .element1 |
element1 inside a wrapper |
.wrapper.element1 |
One element with both classes |
div > .element1 |
element1 that is a direct child of a div |
| … and many more |
Start with the most basic selector first. If it fails to override existing styles, gradually add parent selectors or IDs to give the rule more weight.
I understand, but is it possible to override the in-built CSS without relying on specificity?
Built in code:
.cm-task-checked,
.sb-line-task:has(.cm-task-checked) .sb-wiki-link {
text-decoration: line-through !important;
}
But if I use the same
.cm-task-checked {
}
It doesn’t work. Can I get my space-style to override the built in without having to change the selectors?
The short answer is: No, you cannot override that specific code without changing the selectors.
The reason it “doesn’t work” isn’t just because of your selector; it is because the built-in code is using the !important flag.
When the browser decides which style to show, it follows a strict hierarchy:
!important Flag: This is the 
of CSS. If a style has !important, it will almost always beat a style that doesn’t, regardless of how many classes or IDs you add.!important (or neither do), the one with the more complex selector (e.g., .parent .child) wins.In your example, the built-in code has two massive advantages:
!important. Your code does not..sb-line-task:has(.cm-task-checked) .sb-wiki-link is much “heavier” (more specific) than your simple .cm-task-checked.Since the built-in code uses !important, you must also use !important just to get onto a level playing field. However, even then, a simple class might lose if the built-in one is more specific.
To override it while keeping your code as simple as possible, you have two options:
!important)Copy the built in selector exactly. This creates a “tie” in specificity, allowing your code to win as long as it is loaded after the built-in CSS.
/* You must use the exact same selector to match their weight */
.cm-task-checked,
.sb-line-task:has(.cm-task-checked) .sb-wiki-link {
text-decoration: none !important; /* This overrides their line-through */
}
I went through this whole thing with AI.
Option A actually doesn’t work. And I still don’t know why. I imagine my css is loaded before the built in, but I don’t see documentation clarifying this.
Not entirely correct:
The built in selector in the main.css uses:
#sb-main .cm-editor .cm-task-checked
see it highlighted here:
and not like you specified:
.cm-task-checked,
.sb-line-task:has(.cm-task-checked) .sb-wiki-link {
text-decoration: line-through !important;
}
The one from the main.css in the screenshot above gets a higher priority score than your simple .cm-task-checked selector, that’s why your selector cant override the style.
And to answer your other question:
the custom space-styles are loaded always after the build in css, so if you chose a stronger or even the same selector , it’s always possible to override the built-in one.
Much appreciate the response, @Mr.Red!
Hmm, the code I specified is what’s in the source for 2.3.0 which is what I’m running. So it seems like copy-pasting that into a space-style block still doesn’t work to override the built in.
I always use the browsers Dev-Tools (Inspect Element) to get the correct CSS selector the DOM hierarchy etc. This way i can also quickly modify & test out the expected behaviour.
also check out this brief “conversation” with deepwiki.
I asked about your exact problem, and this is what it told me: deepwiki
Awesome on both counts, makes sense. I’ll use the browser henceforth.
I didn’t know about deepwiki, this is very cool, thank you!
And thanks a ton for all your responses again, they’ve been very helpful!