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

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

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

Post by Psider »

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.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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> </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> </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!
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

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

Post by Psider »

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.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

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

Post by Psider »

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.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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?
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

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

Post by AlanKearns »

Very sure! The source HTML only calls the table's class and stylesheet as in the Flare table style.
Post Reply