Check if child is last - also include text nodes

Question

I want to check if parents child is the last: (so in my case, i want to select the .icon if it is the very last element/node in it's parent .button)

<a href="" class="button">
    <i class="icon"></i>
    Button
</a>
<a href="" class="button">
    Button
    <i class="icon"></i>
</a>

I tried like this: .button .icon:last-child also :last-of-type

But the selector ignores text nodes - is there a way how could i detect if the .icon is before / behind the text?

you mean you want to select the icon if and only if it's the last thing inside the div ? — Temani Afif, Oct 09 '17 at 16:02
Possible duplicate of [Is there a CSS selector for text nodes?](https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) — sol, Oct 09 '17 at 16:04
@ovokuro i think we have a different issue that the link you put — Temani Afif, Oct 09 '17 at 16:05
Possible duplicate of [CSS selector based on element text?](https://stackoverflow.com/questions/5441680/css-selector-based-on-element-text) — Sébastien Helbert, Oct 09 '17 at 16:07
@TemaniAfif OP wants to use CSS to detect element based on text nodes, which isn't possible, as mentioned in the answers to that question — sol, Oct 09 '17 at 16:08
@ovokuro not necessarly a text node ... the idea is to test if it's the very last element inside this div that may contain text — Temani Afif, Oct 09 '17 at 16:13
@TemaniAfif Text nodes cannot be targetted using CSS. The position doesn't matter. There may be a more appropriate duplicate, but the logic is the same — sol, Oct 09 '17 at 16:18
What about my answer. He wants to select the .icon only if it is last thing inside the div. Why not put the text node inside — Shashank Shekhar, Oct 09 '17 at 16:26
Without changing the HTML markup, your only choice is JS (jquery or insert the tag). Another solution is changing the way you detect this (adding an class on parent, etc). — Maxwell s.c, Oct 09 '17 at 18:22

Shashank Shekhar · Accepted Answer · 2017-10-09T17:05:24.907

0

Place the Text node in a element

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

<a href="" class="button">
    <i class="icon">Not last child</i>
    <span>Button</span>
</a><br />
<a href="" class="button">
    <span>Button</span>
    <i class="icon">Last child</i>
</a>

edited Oct 09 '17 at 17:05

answered Oct 09 '17 at 16:08

Shashank Shekhar

182
7

8

works, but i dont want to change the html markup - thanks anyways :) – Aaroniker Oct 09 '17 at 17:19
1

Without changing the HTML markup, your only choice is JS (jquery or insert the tag). Another solution is changing the way you detect this (adding an class on parent, etc). – Maxwell s.c Oct 09 '17 at 18:21
When i have things like this, i avoid using elements to set the style. What i do is set an class on parent that says the icon position and use css to set the icon (if there is only one icon). This can be done setting `:before` and `:after` or floating `:before` – Maxwell s.c Oct 11 '17 at 12:59

Check if child is last - also include text nodes

1 Answers1