CSS tidying - using nesting in SelectionList

Author: darrenburns

src/textual/screen.py

@@ -147,7 +147,6 @@ class Screen(Generic[ScreenResultType], Widget):
 
     DEFAULT_CSS = """
     Screen {
-    
         layout: vertical;
         overflow-y: auto;
         background: $background;        

src/textual/widgets/_option_list.py

@@ -143,7 +143,7 @@ class OptionList(ScrollView, can_focus=True):
         overflow-x: hidden;
         border: tall transparent;
         padding: 0 1;
-        background: $surface    ;
+        background: $surface;
     }
 
     OptionList:focus {

src/textual/widgets/_selection_list.py

@@ -96,62 +96,68 @@ class SelectionList(Generic[SelectionType], OptionList):
     DEFAULT_CSS = """
     SelectionList {
         height: auto;
-    }
-
-    SelectionList:light:focus > .selection-list--button-selected {
-        color: $primary;
-    }
+        
+        & > .selection-list--button {
+            text-style: bold;
+            background: $foreground 15%;
+        }
 
-    SelectionList:light > .selection-list--button-selected-highlighted {
-        color: $primary;
-    }
+        & > .selection-list--button-highlighted {
+            text-style: bold;
+            background: $foreground 15%;
+        }
 
-    SelectionList:light:focus > .selection-list--button-selected-highlighted {
-        color: $primary;
-    }
+        & > .selection-list--button-selected {
+            text-style: bold;
+            color: $success;
+            background: $foreground 15%;
+        }
 
-    SelectionList > .selection-list--button {
-        text-style: bold;
-        background: $foreground 15%;
-    }
+        & > .selection-list--button-selected-highlighted {
+            text-style: bold;
+            color: $success;
+            background: $foreground 15%;
+        }
 
-    SelectionList:focus > .selection-list--button {
-        text-style: bold;
-        background: $foreground 25%;
-    }
+        &:light {
+            & > .selection-list--button-selected-highlighted {
+                color: $primary;
+            }
 
-    SelectionList > .selection-list--button-highlighted {
-        text-style: bold;
-        background: $foreground 15%;
-    }
+            &:focus {
+                & > .selection-list--button-selected {
+                    color: $primary;
+                }
+                & > .selection-list--button-selected-highlighted {
+                    color: $primary;
+                }
+            }
+        }
 
-    SelectionList:focus > .selection-list--button-highlighted {
-        text-style: bold;
-        background: $foreground 25%;
-    }
+        &:focus {
+            & > .selection-list--button {
+                text-style: bold;
+                background: $foreground 25%;
+            }
 
-    SelectionList > .selection-list--button-selected {
-        text-style: bold;
-        color: $success;
-        background: $foreground 15%;
-    }
+            & > .selection-list--button-highlighted {
+                text-style: bold;
+                background: $foreground 25%;
+            }
 
-    SelectionList:focus > .selection-list--button-selected {
-        text-style: bold;
-        color: $success;
-        background: $foreground 25%;
-    }
+            & > .selection-list--button-selected {
+                text-style: bold;
+                color: $success;
+                background: $foreground 25%;
+            }
 
-    SelectionList > .selection-list--button-selected-highlighted {
-        text-style: bold;
-        color: $success;
-        background: $foreground 15%;
-    }
+            & > .selection-list--button-selected-highlighted {
+                text-style: bold;
+                color: $success;
+                background: $foreground 25%;
+            }
+        }
 
-    SelectionList:focus > .selection-list--button-selected-highlighted {
-        text-style: bold;
-        color: $success;
-        background: $foreground 25%;
     }
     """