Repository: Textualize/textual

Issue:
Footer widget footer--description css selector not working
Have you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed
yes

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. **Check it can run without modifications.**

This is my first issue submitted and I'm new to Textual so this could be user error. I'm trying to style a footer widget with CSS. I have successfully used the footer--highlight, footer--highlight-key and footer--key component classes to style the footer, but the footer--description class doesn't seem to do anything and the default css from the Footer class is used. Shouldn't footer--description override Footer in my example below? I would expect the "Quit" text to start off with a purple background. Thanks!

```
from textual.app import App, ComposeResult
from textual.widgets import Footer


class App(App):

    CSS = """
        Footer .footer--description {
          background: purple;
        }
        
        Footer .footer--highlight {
          background: red;
        }
        
        Footer .footer--highlight-key {
          background: blue;
        }
        
        Footer .footer--key {
          background: green;
        }
    """

    BINDINGS = [
        ("q", "quit", "Quit"),
    ]

    def compose(self) -> ComposeResult:
        yield Footer()


if __name__ == "__main__":
    app = App()
    app.run()
```


It will be helpful if you run the following command and paste the results:

```
textual diagnose
```

# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.24.1 |
| Rich    | 13.3.5 |

## Python

| Name           | Value                                                  |
|----------------|--------------------------------------------------------|
| Version        | 3.11.0                                                 |
| Implementation | CPython                                                |
| Compiler       | Clang 14.0.0 (clang-1400.0.29.102)                     |
| Executable     | /Users/Tom/Projects/Python/PythonDemos/venv/bin/python |

## Operating System

| Name    | Value                                                                                            |
|---------|--------------------------------------------------------------------------------------------------|
| System  | Darwin                                                                                           |
| Release | 22.4.0                                                                                           |
| Version | Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64 |

## Terminal

| Name                 | Value       |
|----------------------|-------------|
| Terminal Application | Kitty       |
| TERM                 | xterm-kitty |
| COLORTERM            | truecolor   |
| FORCE_COLOR          | *Not set*   |
| NO_COLOR             | *Not set*   |

## Rich Console options

| Name           | Value                |
|----------------|----------------------|
| size           | width=192, height=45 |
| legacy_windows | False                |
| min_width      | 1                    |
| max_width      | 192                  |
| is_terminal    | True                 |
| encoding       | utf-8                |
| max_height     | 45                   |
| justify        | None                 |
| overflow       | None                 |
| no_wrap        | False                |
| highlight      | None                 |
| markup         | None                 |
| height         | None                 |


Feel free to add screenshots and / or videos. These can be very helpful!



Discussion:
We found the following entries in the [FAQ](https://github.com/textualize/textual/blob/main/FAQ.md) which you may find helpful:


- [How do I center a widget in a screen?](https://github.com/textualize/textual/blob/main/FAQ.md#how-do-i-center-a-widget-in-a-screen)
- [Why doesn't Textual support ANSI themes?](https://github.com/textualize/textual/blob/main/FAQ.md#why-doesn't-textual-support-ansi-themes)
- [Why do some key combinations never make it to my app?](https://github.com/textualize/textual/blob/main/FAQ.md#why-do-some-key-combinations-never-make-it-to-my-app)
- [How can I set a translucent app background?](https://github.com/textualize/textual/blob/main/FAQ.md#how-can-i-set-a-translucent-app-background)
- [How can I select and copy text in a Textual app?](https://github.com/textualize/textual/blob/main/FAQ.md#how-can-i-select-and-copy-text-in-a-textual-app)

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by [FAQtory](https://github.com/willmcgugan/faqtory)

Resolving patch:
diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py
--- a/src/textual/widgets/_footer.py
+++ b/src/textual/widgets/_footer.py
@@ -98,6 +98,7 @@ def _make_key_text(self) -> Text:
         highlight_style = self.get_component_rich_style("footer--highlight")
         highlight_key_style = self.get_component_rich_style("footer--highlight-key")
         key_style = self.get_component_rich_style("footer--key")
+        description_style = self.get_component_rich_style("footer--description")
 
         bindings = [
             binding
@@ -122,7 +123,7 @@ def _make_key_text(self) -> Text:
                 (f" {key_display} ", highlight_key_style if hovered else key_style),
                 (
                     f" {binding.description} ",
-                    highlight_style if hovered else base_style,
+                    highlight_style if hovered else base_style + description_style,
                 ),
                 meta={
                     "@click": f"app.check_bindings('{binding.key}')",


Test patch: