Please use the Preformatted text option in the toolbar when supplying code/CSS examples, it makes them easier to read and to copy-n-paste.
You can use your web-browser’s Web Developer Tools to Inspect the HTML elements that make up the current page when you’re viewing your Story HTML file. If you do this for a Passage that has been assigned a banana Passage Tag the HTML structure would look something like the following.
<tw-icon tabindex="0" class="undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
<tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
<!-- the contents of the current Passage would appear here... -->
As you can see the banana Passage Tag was added as a tags attribute of the
So there are two reasons why your
body[data-tags~="[Tag name]"] CSS selector is not working:
- You are targeting the wrong element. eg, body instead of tw-story.
- You are targeting the wrong attribute. eg. data-tags instead of tags.
note: It is likely that the example you based your CSS selector on was meant for SugarCube and not Harlowe.
Changing your selector be like the following should solve your issue.