Feature Request Add new pseudo classes (after, nth-child, etc...)

Hello,

Currently, there is no way to apply properly common web pseudo-classes.

Some tried by using manipulators : https://twitter.com/shanecelis/status/1577249690797719553

Other used Harmony library to overwrite the UITK code and enforce their usage : https://assetstore.unity.com/packages/tools/gui/ui-toolkit-component-239489

But those pseudo classes are used in web for years ; they should be accessible inside UI TK too! I think about :first-child, :last-child and :nth-child, because they are very common and it seems they aren't planned in the roadmap.

There also are ::before and ::after. But, eventhough I miss those, I think they are at lower priority.

If you could add those pseudo classes or, at least, expose the pseudo class API a bit more to create ours, that should be really a time saver!

Thank you

 

I made two examples to illustrate my request on codepen. Both cases are not possible with `gap`.
The first is using `:nth-child(even)` and `:nth-child(odd)` to create automatically alternance between rows (it's pure CSS, so we will not need any custom control or manipulator).
The second one is using `:last-child`, `:not()` and `::after` pseudo-classes to manage a breadcrump in pure CSS too.

Codepen : https://codepen.io/Rewar/pen/BaqbQVE

 

That's a good use case. Also, :first-child, :nth-child(*), :last-child could be used, for example, in racing games for a sheet with the results of the race after finish tournament. As a player, you need to finish in the top three. The winner would receive a gold medal [:first-child], the second racer would receive a silver medal [:nth-child(2)] and the third racer would receive a bronze medal [:nth-child(3) with border-bottom]. The last racer would not advance to the next tournament [:last-child with red background]. That's another example where these pseudo-elemets would be very useful. And it could be styled without code intervention on the C# side. Regardless of the outcome of the race, the styling would still be the same, according to the order of the racers.

https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_firstchild_more4
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_nth-child
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_last-child

 

I found a way to enforce the `:first-child` pseudo-class, but it is tricky and not really the better way.

I used Harmony to patch the UnityEngine.UIElements.StyleSheets.StyleSelectorHelper.MatchesSelector method and execute a method after its call. Then, I read every parts of the selector and check if it's a `PseudoClass` type and a `first-child` value. Then I update the result by setting the match success to true.

But this is using reflection and Harmony, still I can't build in IL2CPP and it slows down the UI Builder and any interaction in the editor.

 

Throwing my two cents in on first/last/nth-child selectors, though if gap were supported and easier to add, that'd solve enough of my needs to shut me up. @benoitd_unity is there an issue we can throw votes on or follow for updates?

 

+1

 

+1 for :first-child, :last-child and :nth-child

 

+1

 

+1

 

I find myself wishing these existed increasingly often, the more I try and use uss over hardcoding all of my styles. Due to the lack of them, I can't take advantage of uss as often as I would like/should.