:last-child or :last-of-type selector help
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
:last-child or :last-of-type selector help
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?
Re: :last-child or :last-of-type selector help
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.
"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.
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
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.
I hope that helps!
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>
Re: :last-child or :last-of-type selector help
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.
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.
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
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.
Re: :last-child or :last-of-type selector help
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.
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.
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
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.
Re: :last-child or :last-of-type selector help
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.
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.
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
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!
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
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.
Re: :last-child or :last-of-type selector help
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?
Are you sure the inline styles aren't in your source topic?
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: :last-child or :last-of-type selector help
Very sure! The source HTML only calls the table's class and stylesheet as in the Flare table style.