How to add custom css on calendar-by-calendar basis?

Replies: 0

Let’s take “Private calendar A” in your first example view on your example page. It has white text on blue background. I can specify the colours in the shortcode or use CSS. I can use CSS to create a hover effect, e.g. switch the colours.

.fc-content:hover
{
	color: blue;
	background-color:white;
	border: 1px solid blue;
}

Let’s add “Private calendar C” into the equation, i.e. I want it to have similar hover effect with its colours, white and pink. Specifying the non-hover colours is trivial, but how for hover… How can distinguish two calendars in CSS?

I thought, that I could use an attribute selector

[data-calendarids="["private_calendar_C@gmail.com"]"]:hover
{
	color: pink;
	background-color:white;
	border: 1px solid pink;
}

but this doesn’t work (probably too many quote signs).

Pointers appreciated.