How to change the style for encoding in the status bar


I’m using the status-bar package, which, among other things, writes the current file encoding to the status bar, for instance “UTF-8”.

I would like to make this information better visible and set the color for this element of the status bar.

Using the DOM inspector, I thought this could be done by putting

status-bar-right encoding-selector-status encoding-status a {
  color: red;

into my styles.less, but this doesn’t have any effect.


Try this:

status-bar {
    .encoding-status {
        a {
            color: red;


This works!!!

How can one find out this information, i.e. where is it documented?



@rovf you may want to read up on how CSS selectors work. MDN has a good tutorial at

Less also supports the & combinator which references the immediate parent:


I think I now see my mistake. Since “encoding-status” etc. are names of CSS classes, not HTML tags, I needed a leading period. Correct?

Thank you for providing the links…