Styling last child

Here is what the documentation has to say:

Trigclass Attribute
The trigclass attribute allows the user to define a custom class for the tag element that wraps the trigger text. This class will be added after the required collapseomatic class that is assigned by default.

[expand title="A New Hope" trigclass="highlight"]Target Content[/expand]

https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#trigclass
CSS

.highlight {
  color: red;
}

If you don’t want to use trigclass to manually set one of the expands to use ‘red’ text color, and want to stick with the last-child “structural pseudo-class” you attempted to use above, then you’ll need to think differently about how the expands are structured. For example, try using an UL and LI elements, like’a so:

<ul class="my_special_ul_class">
[expand tag="li" title="one fish"]...[/expand]
[expand tag="li" title="two fish"]...[/expand]
[expand tag="li" title="blue fish"]...[/expand]
[expand tag="li" title="red fish"]...[/expand]
</ul>

and now we have a little family of li’s with a red-headed step last-child:

.collapseomatic:last-child {
  color: red;
}

Does that help some?

Hello @twinpictures,

thanks for your fast answer.

I dont want to add a trigclass manually to a specific expand.
Your idea to change the structure is what I need.

What I actually want is to have a group of some expands (with a border) which stick together without any margin-bottom. But after the “group” there should be a margin-bottom before a new paragraph or something like that appears. So I need a wrapper around them.

Now I have:

<div class="collapseomatic-wrapper">
[expand title="one fish"]...[/expand]
[expand title="two fish"]...[/expand]
[expand title="blue fish"]...[/expand]
[expand title="red fish"]...[/expand]
</div>

With the wrapper I can style the margins in my stylesheet:

.collapseomatic:not(.colomat-close) {
	border: 1px solid rgba(0,0,0,.125);
	margin-bottom: 10px;
}
.collapseomatic-wrapper .collapseomatic:not(.colomat-close) {
	margin-bottom: 0px;
}
.collapseomatic-wrapper {
	margin-bottom: 10px;
}

So all looks fine ??

Just one last question: Can I add this div wrapper in the expand shortcode or do I need to add it in the html editor with a div tag?

Best regards
saNNNy

• This reply was modified 6 years, 5 months ago by Sany.

add it in the html editor with a div tag.

Ok thank you.