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.
Changing the colour of a div element based on the parent div
Re: Changing the colour of a div element based on the parent
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).
To do this through the Flare Stylesheet editor:
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.
Here's example code (added separately from your div.tip and div.update code).
Code: Select all
div.update div.tip
{
background-color #FFFFFF;
}
- Right-click on div.update, and pick "Add Selector."
- Expand "Advanced Options."
- In the "Advanced Selector" text box, add a space after the text div.update and type div.tip.
- Left-click OK, then make any desired changes and save them.
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.
Last edited by Gene K on Thu May 14, 2020 7:08 am, edited 1 time in total.
Re: Changing the colour of a div element based on the parent
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.
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.
Re: Changing the colour of a div element based on the parent
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.mdpais-c wrote: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.