Complex selectors work in XML Editor but not built targets. What have I done wrong?

[ChoccieMuffin]

I have an odd problem and can't work out what I have done wrong.

In my stylesheet I have styling defined for a dropdown, but I want to make a nested dropdown display differently. Code for dropdowns from my stylesheet shown below. (Before you cringe at what it looks like, I added the third bit (the bit that adds the red border) just to test that using space as the combinator for my complex selectors is correct, and the green colour in the fourth bit for the nested hotspot was again just to confirm that I was adjusting the right element. )

The changes displayed nicely in the XML Editor (on the left of the screenshot), but not in the preview (on the right) or built targets, either PDF or HTML5, and I can't figure out why. I tried the various different ways of producing complex selectors as described here, https://www.w3schools.com/cssref/css_selectors.php, and space seemed to be the way to go.

There is only one stylesheet in the project, the changes I made were in the default medium, there are no other dropdown styles specified in the stylesheet, I've looked at all the tabs on the targets and couldn't see anything that might be causing the nested dropdown styling not to "stick" in the output, and I'm now officially stumped.

This shows how nested things are, so in this case the nested dropdown is nested in a nested list, which is inside a dropdown, but in other instances I want the nested dropdown to be inside a table nested in the outer dropdown, so I can't do anything with my selectors that mentions lists.

So, what have I done wrong, and what do I need to do to make what appears in the XML Editor also appear in the targets?

Code and screenshot in following posts because it wouldn't let me put them all in a single post.

[ChoccieMuffin]

Code: Select all

MadCap|dropDown
{
	font-size: 18px;
	font-style: normal;
	border: solid 1px var(--Border-Light);
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 8px;
	mc-image-position: left !important;
	mc-closed-image: url('../Images/closed.svg');
	mc-open-image: url('../Images/open.svg');
}

MadCap|dropDownHotspot
{
	color: var(--Dropdown);
}

MadCap|dropDown MadCap|dropDown
{
	font-size: 14px;
	border: solid 4px red;
}


MadCap|dropDown MadCap|dropDown MadCap|dropDownHotspot
{
	color: var(--BodyText);
	font-weight: bold;
	font-size: 14px;
	color: green;
}

[ChoccieMuffin]

This is the screenshot.

Dropdowns.png

[NorthEast]

Basically, it doesn't work because you can't use any of the MadCap| styles combined with other tags in complex selectors (at least not in most cases).

Not your fault for not knowing, as I don't think I've seen this documented anywhere officially.

It works in the editor because the tags in the editor (source) actually use tags like <MadCap:dropDown>.

But in the actual output, those <MadCap: > tags are converted to various tags like div and span - so your output looks something like:

Code: Select all

<div class="MCDropDown dropDown" ...>
   <span class="MCDropDownHead dropDownHead">
      <a href="#" class="MCDropDownHotSpot dropDownHotspot" ... >

The problem is that Flare just ignores nested MadCap! tags and doesn't generate the CSS for them in the output.

So, you need to write your CSS for the tags that are geenrated in the output.
For example to style a hotspot link that's inside a nested dropdown:

Code: Select all

.dropDown .dropDown .dropDownHotspot:link {
    color: red;
    font-size: 1em;
}

[ChoccieMuffin]

@NorthEast, I think I love you!

Thanks for that very clear explanation. I'm just about to test it but it makes very obvious sense so I'm not expecting to come back with any further questions.

I don't think the Flare documentation says enough about some of the features that a lot of us use, such as complex selectors. So maybe I'll put in a request for them to update the docs, even if it's just to add a note to say exactly what you've said.

[ChoccieMuffin]

Building on your very helpful reply, in order to get it to display correctly in both the XML Editor and the built output, I had to list both bits in my stylesheet, where the first item makes the XML Editor work, and the second makes the built output work. So my stylesheet contains these (where "..." is the attributes I wanted):

MadCap|dropDown MadCap|dropDown,
.dropDown .dropDown
{
...
}

MadCap|dropDown MadCap|dropDown MadCap|dropDownHotspot,
.dropDown .dropDown .dropDownHotspot:link
{
...
}