CSS Question
current Situation:
I have a specific file named Agenda
In that file there are monthly calendars, of which the days link like so: [[#maandag 03 januari|03]] to a spot further down that has a h5 header with the dates’ name, like so ##### zondag 03 januari and right under that name it has an empty task - [ ] and under that is a link back to the top of monthly calendar like so: [[#januari 2022|▲]]
That would look like this:
##### maandag 03 januari
- [ ]
[[#januari 2022|▲]]
What I want to achieve:
Write CSS that will turn these links in the montlhly calendar bold (or coloured): [[#maandag 03 januari|03]] IF and only IF there is something other than empty space after the empty task under the h5 header. That would look like so, for instance:
##### maandag 03 januari
- [ ] 10:00 meeting Dan
[[#januari 2022|▲]]
and if that condition is met (the task not being empty), I want the corresponding date in the monthly calendar to become bold or coloured. Or both.
I need these rules to be part of a .agenda class, so I can call that class in the yaml forthe Agenda file alone.
How to achieve this?
I think that would leave me with the following classes to deal with in the css that needs to be written:
.agenda h5
.agenda a.internal-link
And I have read stuff at Attribute selectors - CSS: Cascading Style Sheets | MDN about these Attribute selectors that I think can be used to achieve this, but I find it rather difficult how to write that out as valid CSS. Specifically how to tell the CSS that it should look for all the non empty tasks.
Can anyone help me figure out if it is possible to achieve this with CSS and if so, how to do that?