First of all I’d love to hear what you guys think about my theme (which I’ve spent an unnecessary amount of hours on hah): https://atom.io/themes/apathy-theme
I’m looking to learn about any tips & tricks I’m not aware of for targeting “hard to reach” elements? Essentially I’d like everyone who uses my theme to get the same or similar result so I’d like to accomplish this without requiring the addition of any additional grammars.
One of the things that has been most useful for sure is the
sibling + target to do things like styling the curly braces used in an
if statement differently than braces next to a parentheses (by using the sibling selector).
However, all these useful selectors are only possible if that thing is wrapped in a
<span> to begin with. If I want to say, target just the word “Something” in
Something.method, I can’t, because it’s not wrapped in anything. This is better illustrated with a snippet:
<span class="source js"> "Something" <span class="meta delimiter dot">.</span> "method" <span class="brace begin">("> <span class="brace end">)</div> </span>
As you can see, if “Something” was wrapped in a span, you can use
.source > span:first-child but since there’s no tag for text on its own that’s not possible. Have any of you figured out a way to - for example - just style the word “something”, or “method”?