Styling last child

  • Resolved Sany

    (@sannny)


    7 years, 10 months ago

    Hello,

    can somebody help me with my css, please?

    I have some expands on my page, I want another style for the last one e.g. it should be red.

    The following style does not work. I also tried with adding div, last-of-type and so on but nothing works.

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

    Best regards
    saNNNy

    • This topic was modified 7 years, 10 months ago by Sany.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author twinpictures

    (@twinpictures)

    7 years, 10 months ago

    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?

    Thread Starter Sany

    (@sannny)

    7 years, 10 months ago

    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 7 years, 10 months ago by Sany.
    Plugin Author twinpictures

    (@twinpictures)

    7 years, 10 months ago

    add it in the html editor with a div tag.

    Thread Starter Sany

    (@sannny)

    7 years, 10 months ago

    Ok thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Styling last child’ is closed to new replies.

Tags