Styling a element with several CSS classes
See original GitHub issueHi,
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:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
No problem, fixed in
v2.3.2
.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:{.with.dot}
asclass="with.dot"
.<p class="separate with spaces">
) then to CSS (.multiple.classes.on.same.element { ... }
).{.note .green}
, is an explicit communication of “this is two things”. For me, explicit > implicit.