Questions about custom tag styling using CSS

Custom CSS & Theme Design
10
  1. Dunno. Looks like the a.tag and a.tag:hover sections got duplicated. The instances appear identical, so no harm in the end, but no good use either, so possibly an accident.
  2. @media is an “at-rule” that applies CSS under the specified media circumstance. Learn more
  3. Two dashes is syntax often used for variables. You can make up your own variables with arbitrary names and assign any types of values to them. For example, you can make:
body {
	--bamajon-likes-this-color: #EEE111;
}

Then you can call on that variable whenever you want to use it in a rule:

a.tag {
	background-color: var(--bamajon-likes-this-color);
}

That’s what the Obsidian team has done: they made up variables with useful names then applied them in rules.

Variables are helpful for keeping things consistent and for quickly making changes. For example, a variable like --text-muted might be used a hundred times throughout the CSS. To update it, instead of finding and editing 100 instances and making sure to type the hex code accurately each time, you can change them all at once by doing:

body {
	--text-muted: #CCCCCC;
}

… and viola.

So when you’re styling, it’s up to you and what you’re trying to accomplish whether it makes the most sense to change a rule directly, change an existing variable globally, change an existing variable under limited circumstances, or make your own reusable variable.

  1. see 3. And notice that you can assign one variable’s values to another variable, which is what’s happening in the example you gave.
  2. I’m going to guess it styles backslashes that are used to escape tags, as seen in Source mode. You could find out by typing \#test, switching to Source mode, and seeing if .cm-hmd-escape-backslash is in the DOM for the backslash.
  3. I’m not sure I understand this question. .markdown-source-view is a selector that applies to the two editing modes—Source mode and Live preview. It’s not really related to “replacing” .cm-hashtag. If you’re trying to figure out which selectors to use, then check out the pinned post Obsidian CSS Inspector Workflow. But if you already know that and are asking about how much specificity to use, then MDN’s Specificity can help you out. (Or maybe I’m completely off about what you’re actually asking.)

For both practical use and just curiosity, here is an excellent resource that’s easily searchable for specific questions as well as pleasantly browsable for general knowledge: CSS: Cascading Style Sheets | MDN

1 Like