:first-child selector help

This forum is for all Flare issues related to styles, stylesheets and XML.

:first-child selector help

Postby kel322 on Fri Jun 18, 2021 8:03 am

Hello,
In my stylesheet I have divs for different types of warnings we use. It is set up to have auto-numbering for the p:first-child as shown below.
Code: Select all
div.NoteWarningGeneral p:first-child {
   mc-auto-number-format: '{b}WARNING{/b}: ';
}


This generally works as I want it to; however, when there is additional text in the div with embedded <p> tags, like a list, the auto-number triggers. In the example below, each bullet shows "WARNING" before it.

I understand why this is happening -- the CSS is set to select any first-child <p> element within the div. I just want it to select the first one of the specific div. Is there a way to do this? I have tried using div.NotWarningGeneral>p:first-child, but the auto-numbered text doesn't show at all when I do this.

Code: Select all
 <div class="NoteWarningGeneral">
            <p>
                <MadCap:snippetText src="..x.flsnp" /> (Shows autonumber text, yay!)
            </p>
            <ul>
                <li>
                <p>
                    <MadCap:snippetText src="../secure.flsnp" /> (Shows autonumber text, nay!)
                </p>
                </li>
                <li>
                <p>
                    <MadCap:snippetText src="..performance.flsnp" /> (Shows autonumber text, nay!)
                </p>
                </li>
            </ul>
        </div>
kel322
Propeller Head
 
Posts: 28
Joined: Tue Jan 03, 2017 12:56 pm

Re: :first-child selector help

Postby Nita Beck on Fri Jun 18, 2021 9:00 am

I *think* you need to add ">" to your complex selector so that it's applied only when the parent is the div.
Code: Select all
div.NoteWarningGeneral > p:first-child


https://www.w3schools.com/cssref/css_selectors.asp
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3428
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: :first-child selector help

Postby kel322 on Fri Jun 18, 2021 10:47 am

Thank you so much, Nita!
I thought that was what I had needed to do, but it wasn't showing any auto-numbered text at all. I must have created a typo somewhere in my css because when I tried again, it worked.
kel322
Propeller Head
 
Posts: 28
Joined: Tue Jan 03, 2017 12:56 pm


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 14 guests