:last-child or :last-of-type selector help

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

:last-child or :last-of-type selector help

Postby AlanKearns on Fri Jul 02, 2021 6:38 am

I have ULs, OLs, and P tags in the TD tags of the last row and cell of table.MyClass, all with a bottom margin. How would I use last-child or last-of type to select them so I can suppress their bottom margins?
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby Psider on Sun Jul 04, 2021 5:01 pm

It's a bit hard to tell without the code, but maybe something like this?

"In the last row of any MyClass table, set the bottom margin to zero for all ol, ul and p tags."

table.MyClass tr:last-of-type ul, table.MyClass tr:last-of-type ol, table.MyClass tr:last-of-type p {
margin-bottom: 0;
}

It might need to be more complex if you have p tags inside your lists, or nested lists, but that might at least get you started.
Psider
Propellus Maximus
 
Posts: 693
Joined: Wed Jul 06, 2011 1:32 am

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Tue Jul 06, 2021 1:48 am

I'm sorry for not adding this before, I thought I could make it less cumbersome a q! Here's two simplified tables, from a project where the default bottom margins on P's and UL/OL's put extra space between the last tag in a 'myclass' table's last TD in a row, so that the distance to the row's bottom border varies if the text in TD's is enclosed in them or not. So I'm looking for a way to set an override on those specific bottom margins.

Code: Select all
<table class="myclass">
            <tbody>
                <tr>
                    <td>&#160;</td>
                    <td>
                        <p>Text in P tag</p>
                        <p>The bottom margin of this needs to be suppressed</p>
                    </td>
                </tr>
            </tbody>
        </table>

<table class="myclass">
    <tbody>
       <tr>
           <td>&#160;</td>
           <td>Text in TD tag
              <ul>
                    <li>The bottom margin of the UL containing this needs to be suppressed</li>
             </ul>
            </td>
      </tr>
   </tbody>
</table>


I hope that helps!
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby Psider on Wed Jul 07, 2021 9:34 pm

I'm pretty sure the code I posted will do what you want based on your examples. If you want them separate they can be like so:

table.MyClass tr:last-of-type ul {
margin-bottom: 0;
}

table.MyClass tr:last-of-type ol {
margin-bottom: 0;
}

table.MyClass tr:last-of-type p {
margin-bottom: 0;
}

Change the class to whatever yours is, you can leave the ol definition out if you don't need it, and set the margin bottom to whatever you need.

If you need help to do that in the Flare stylesheet editor, hopefully someone else can come along with more info, as I don't currently have access to Flare, sorry.

Oh and I've only posted code based on generic css. If you use the Flare table styles, it might be more complicated, but again, I don't have Flare so can't help with specifics.
Psider
Propellus Maximus
 
Posts: 693
Joined: Wed Jul 06, 2011 1:32 am

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Thu Jul 08, 2021 1:34 pm

No, I'd tried that, and it doesn't. I think it's something to do with the class aspect; that it doesn't work in what looks like the obvious way. Somehow classes don't play nice with pseudo-selectors in conditional selection. Unfortunately the class is the only way I have to distinguish the tables I want to apply it to (unless I can select on the inline string by which Flare calls table styles, instead) from the tables I don't.
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby Psider on Thu Jul 08, 2021 6:11 pm

Make sure you get the case of the classes the same, as CSS is case sensitive.

Conditional code could affect it I suppose. You'd have to check the specific code in the output, as the structure could be slightly different to expected.
Psider
Propellus Maximus
 
Posts: 693
Joined: Wed Jul 06, 2011 1:32 am

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Mon Jul 12, 2021 5:29 am

That's not what I meant by 'conditional'. I mean that where 'table tr:last-of-type ul' may work, 'table.myclass tr:last-of-type ul' won't. It might look like it should select 'the UL in the last row of tables of the 'myclass' class', but that's not what it's achieving, because the extra condition of it being a class of table, is somehow stopping that from happening.
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby Dave Lee on Mon Jul 12, 2021 5:55 am

Psider's example will work fine for a normal table that isn't using Flare's table stylesheets, and using a class on the table style will not make any difference.

It will be different if you're using Flare's table stylesheets, as Flare will generate additional classes that are applied to table elements (tr, td, etc.) and corresponding CSS, and some of that may conflict with the CSS you've added.

So you need to check the CSS in your output. Press F12 and use the browser dev tools to inspect the actual HTML and CSS being used, and that will help you work out what's happening.
Dave Lee
Master Propellus Maximus
 
Posts: 5996
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Mon Jul 12, 2021 1:32 pm

Thank you for that insight - that's worth looking into. I can imagine Flare's applied loads of complex overlapping CSS, but I'm also confident I can untangle it!
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Tue Jul 13, 2021 12:28 am

Oh well, it doesn't look possible. Flare takes everything in the table style, including the margins of the P tags, and repeats them as inline styles, which would override anything I did in the global stylesheet.
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am

Re: :last-child or :last-of-type selector help

Postby Dave Lee on Tue Jul 13, 2021 12:45 am

That sounds a bit strange. I've not seen Flare add inline styles to a table, other than the width on the table tag.
Are you sure the inline styles aren't in your source topic?
Dave Lee
Master Propellus Maximus
 
Posts: 5996
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: :last-child or :last-of-type selector help

Postby AlanKearns on Wed Jul 21, 2021 2:09 am

Very sure! The source HTML only calls the table's class and stylesheet as in the Flare table style.
AlanKearns
Propeller Head
 
Posts: 68
Joined: Thu Sep 11, 2014 2:06 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 4 guests