Filed under:
You would want to use & to style the root element. This helps DevTools insert new properties in the right place. Otherwise, it will insert new properties right before the closing brackets, which is badly formatted (if that's even an issue that has not been fixed).
.recent-bar {
& {
background: #5b5b5b;
}
.progress {
/* ... */
}
}Next, if you prefer to apply change directly in DevTools by loading the source code into workspace, then, you might want to leave an empty asterisk (*) selector so that you can find the style block faster by inspecting any of the child element using inspect element tool.
.recent-bar {
* {}
.progress {
/* ... */
}
}