How to group IDs in custom styles by data-tags

#1

I have some css like so…

[data-tags~="video"] #organizationid,
[data-tags~="video"] #allianceid,
[data-tags~="video"] #sourceid,
[data-tags~="video"] #placeid
{
 display: block;
}

Is there a way to group the IDs so I do not need to repeat custom data-tag definition text?

Thanks

#2

You can use the :is() CSS pseudo class function:

#3

Thank you. Initial changes are working as expected.

1 Like
#4

@saqimtiaz sorry, in the end it was not working. Likely how I’m using it.

:is ([data-tags~="video"]) #organizationid, #allianceid, #sourceid, #placeid { display: block }

What is wrong?

#5

Try this:

[data-tags~="video"] :is(#organizationid, #allianceid, #sourceid, #placeid)
{
 display: block;
}
#6

Again, thank you!!! Much appreciated.

1 Like
#7

@clsturgeon

The solution you have is a good one, however, for your own (or your code’s) well-being you should be aware of what :is() is doing to specificity. Read the following comparison between :is() and :where() and be sure for yourself that :is() is what you actually want/need.

#8

@CodaCoder I suspect :is() is the correct choice. Here is the use case so you can better comment.

I have been using these css custom style data-tags to define which edit fields appear in my edit template.

All my controls for these fields have a class that defines {display:none} and these data-tags in css explicitly change those to {display:block}

These controls appear in tiddler edit mode, providing a complete list of editable fields defined for a specific tag.

In the limited example I previously provided I showed a few fields that would appear if the tiddler being edited was tagged with “video”.

When used the syntax @saqimtiaz provided it appears to be functional/working.

Also, I suspect this approach would be processed more efficiently than the way I had it.

Thoughts?