Changing the colour of a div element based on the parent div

[mdpais-c]

This is my first time posting on the forum. I'm a new Madcap Flare user who's done some quick tutorials on css to help me in my technical writing. Just wondering whether what I want is possible in Madcap Flare.

Among the div styles I've created in my project I have a div.tip which has a grey background among other styles and div.update which only has a grey background. There are a few situations where div.tip is within div.update and I was wondering if there's a way to automatically identify these instances and change the background of div.tip to white to stand out in such instances.

[Gene K]

Yes, you can do that. Use a selector that targets div.tip child elements with div.update parents.

Here's example code (added separately from your div.tip and div.update code).

Code: Select all

div.update div.tip
{
	background-color #FFFFFF;
}

To do this through the Flare Stylesheet editor:

1. Right-click on div.update, and pick "Add Selector."
2. Expand "Advanced Options."
3. In the "Advanced Selector" text box, add a space after the text div.update and type div.tip.
4. Left-click OK, then make any desired changes and save them.

NOTE: CSS sets priority based on "specificity," so you only need to code the differences from the main style.

Here's a good reference for selector syntax: https://www.w3schools.com/cssref/css_selectors.asp

EDIT: Fixed typo where I forgot to replace my own style with the original post's.

[mdpais-c]

Ooh. That worked brilliantly. Thank's Gene K.

For anyone that might find this post of interest, there's a slight mistake in step 3 of Gene K's instructions to be used in the Flare Stylesheet editor - I had to type div.tip instead of div.example.

[Gene K]

Ooh. That worked brilliantly. Thank's Gene K.

For anyone that might find this post of interest, there's a slight mistake in step 3 of Gene K's instructions to be used in the Flare Stylesheet editor - I had to type div.tip instead of div.example.

Glad to help, and sorry for the typo - I used my own stuff to test out the suggestion and make sure it worked first, then forgot to change it to match your scenario. Oops. Fixed.