textual icon indicating copy to clipboard operation
textual copied to clipboard

CSS psuedo selectors

Open willmcgugan opened this issue 3 years ago • 2 comments

We should implement more pseudo selectors in Textual.

It will be really nice in combination with queries, for instance to remove the last child in a list:

self.query(".item:last-child").remove()

And of course for general styling.

I'm thinking of last-child and first-child, but we could implement any that make sense.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes for a list of pseudo selectors.

willmcgugan avatar Aug 06 '22 08:08 willmcgugan

I'd really recommend the :nth-child selector, and if you decide to implement it, this short video on selecting a range of elements would be a great test for whether it works according to spec:

https://youtu.be/nKLAbYQHnt8

tusharsadhwani avatar Aug 06 '22 08:08 tusharsadhwani

I'm not sure if :nth-of-type makes sense or is even viable in textual, but if it is, that'd also be extremely powerful

tusharsadhwani avatar Aug 06 '22 08:08 tusharsadhwani

Europython spriters: this may be a challenging one. Mention me if you need assistance.

willmcgugan avatar Jul 22 '23 11:07 willmcgugan

hi there, I'm from EuroPython and I would like to take this issue.

csernazs avatar Jul 23 '23 09:07 csernazs

Good luck!

willmcgugan avatar Jul 23 '23 09:07 willmcgugan

Assuming this is stale. Will revisit psuedo selectors at some point in the future.

willmcgugan avatar Nov 21 '23 16:11 willmcgugan

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

github-actions[bot] avatar Nov 21 '23 16:11 github-actions[bot]