It seems the data-widget.uri selector for the selectionbox widget can only be accessed in the div of the code that manages the non-dropdown options.
The div that controls the dropdown options is farther down and does not have the data-widget.uri selector available.
How can I change the styling of the fonts in the dropdown box if I want to change them for exactly ONE selectionbox widget only?
Best answer by Edo Nijmeijer
Good oberservation, which, unfortunately for you, is correct: the items in the dropdown are kept apart in different parts of the document tree. It makes it easier for them to be hovering over other items.
But it also means there’s no css-setup that can bring them together.
Some background: for the component itself they are technically tied by the id, but since that is automatically generated, based on the presence of other dropdowns too, there still is no stable id to use in your css, nor would you be able to use it ‘dynamically’ in css. And the order of opening your dropdowns also plays a role. Just look at the id on the <ul> within the select2-drop element you showed above: it varies. We really are out of luck.
Time to think about alternatives. Perhaps it is manageable to work with multiselect lists that are shown and hidden based on other ‘circumstances’? You could style all of those individually. Otherwise I’m not too sure right now.
How can the ‘function’ of these dropdowns be so different that you feel like you need to style them this way? Does that signal something?