Using Complex Selectors for MadCap Elements with Other Styles

Article #: ELN003F

Product: Flare

Version: 2021 r2

Summary:

This article provides details on how to use MadCap elements with other styles in complex selectors.

Problem:

When there is content nested within MadCap elements, you may not see the styles applied to the MadCap elements on the nested content. For example, you may have paragraphs nested under a MadCap|dropDown or MadCap|question and applied a blue font color for these MadCap elements. However, if paragraph elements have a different font color applied, then the blue color will not apply. Any styles applied directly to the nested paragraph tags will “win” and override the same property applied to the outer tag level.

Solution:

One solution to customize the look of paragraphs or other elements nested under MadCap elements is to create a style class and apply them to the paragraphs needed such as p.dropdown or p.question. This way, paragraphs with the style class applied will inherit the parent paragraph styles and also use the custom styles. This method requires applying the style classes to every instance of the content used within a MadCap element.

Another solution is to use the MadCap element in a complex selector with other styles. The best way to do this is to use the style classes for the elements in the output. You can determine the styles applied in the output by inspecting the elements from a browser. Then a complex selector can be created using those style classes. These custom styles can then be added to your project stylesheet and will be automatically applied to content structured the same way throughout your project.

Examples

Paragraphs nested under a plain MadCap|question element.

In the Flare source topic
Copy
```
<MadCap:question >
    <p>Which movie is based on a book?</p>
</MadCap:question>
```
In HTML5 output

Solution

Use the complex selector below to style all paragraphs which appear under a MadCap|question element to be bold, 17 px, and with color #076685.
Copy
```
.question p
{
    font-weight: bold;
    Font-size: 17px;
    color: #076685;
}
```
Paragraphs nested under a MadCap|question element with style class “class”.

In the Flare source topic
Copy
```
<MadCap:question class="class">
    <p>Which movie is based on a book?</p>
</MadCap:question>
```
In HTML5 output

Solution

Use the complex selector below to style all paragraphs which appear under a MadCap|question.class element to be bold, 17 px, and with color #076685.
Copy
```
.questionclass p
{
    font-weight: bold;
    Font-size: 17px;
    color: #076685;
}
```

These are only examples but the same concepts and methods can be used to find the styles needed to quickly create the complex selectors needed to style your content easily.

The following two articles from W3 Schools provide more information regarding this and other types of CSS selectors.

Attribution:

Last updated:

Date

Author:

Name

Contributions by:

Names