question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling a element with several CSS classes

See original GitHub issue

Hi, I am trying to use this in tui.editor within a Gollum installation, I have already written a render layer for Gollum which mimics markdown-it-attrs behaviors. Something that makes me wonder is some inconsistencies when having several classes on an element.

Example input:

1.this is the markdown I'm trying to parse {.note .green}
2.this is the markdown I'm trying to parse {.note.green}

Current output:

<p class="note green">1.this is the markdown I'm trying to parse</p>
<p>2.this is the markdown I'm trying to parse</p>

Expected output:

<p class="note green">1.this is the markdown I'm trying to parse</p>
<p class="note green">2.this is the markdown I'm trying to parse</p>

Won’t you agree that both should render the same way? I mean why not allowing the shorthand .warning.green instead of .warning .green? and why it completely eats .note.green?

Thanks /Reza

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
arve0commented, Sep 29, 2018

No problem, fixed in v2.3.2.

1reaction
arve0commented, Sep 29, 2018

But don’t you think that it’s better to render {.note.green} -> class=“note green” and {.note.green} -> class=“note.green”.

I understand why you ask, as .a.b in CSS means “class a and b on same element”. Though I see at least three reasons not parse it that way:

  1. Pandoc (that markdown-it-attrs mimics) renders {.with.dot} as class="with.dot".
  2. Markdown is nearer to HTML (<p class="separate with spaces">) then to CSS (.multiple.classes.on.same.element { ... }).
  3. The extra space, {.note .green}, is an explicit communication of “this is two things”. For me, explicit > implicit.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using two CSS classes on one element - Stack Overflow
You can have the classes separate in css and still call both just using the class="class1 class2" in the html. You just need...
Read more >
Multiple Class / ID and Class Selectors - CSS-Tricks
Double Class Selector. Target an element that has all of multiple class es. Shown below with two class es, but not limited to...
Read more >
How to apply two CSS classes to a single element
Multiple classes can be applied to a single element in HTML and they can be styled using CSS. In this article, we will...
Read more >
Grouping Multiple CSS Selectors in One Style Property
When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet.
Read more >
CSS Multiple Class Selectors | UnusedCSS
Multiple CSS class selectors add further value when the states of different elements have partially shared styles. Instead of repeating the style code,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found