0

Say I we start with a parent with three child div's as shown below:

<div class="leftcolumn">
            <div id="post2" class="card post show"></div>
            <div id="post1" class="card post show"></div>
            <div id="post3" class="card post show"></div>
</div>

And say I have the following selector in my css file:

.card.post.show:last-child{
   outline: 10px solid black;
}

I want the properties in that selector to be set to to the last child element that only have the classes "card", "post", and "show". At the start, this selector selects the element which I desire to apply changes to, which is is the div with id "post3".

However, say the classes for the child divs change as so:

<div class="leftcolumn">
            <div id="post2" class="card post show"></div>
            <div id="post1" class="card post show"></div>
            <div id="post3" class="card post"></div>
</div>

I expect the selector to select and apply changes to the child with id "post1" instead, though it doesn't.

Is there a particular selector to use that will work as I want it to?

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
E Bazan
  • 3
  • 3
  • Just a note since it's easy to miss in the comments on the dupe linked above that what you're really looking for is `nth-match`, which is a CSS4 selector and doesn't have really any browser support at the moment. So you'd need JavaScript to do this for now. – cjl750 Sep 11 '18 at 04:06

2 Answers2

1

First off, I can see that you have .class in your selector. There is no element with class of class. You should make this card.

I don't think what you're suggesting is possible to do with plain CSS selectors, you may have to use JavaScript or another client-side scripting language.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
  • Oh shoot, I actually meant to have ".card" instead of ".class". Typo. I implemented your solution but it didn't work. Would it not work if there were multiple div's nested in each of the 3 main child div's? That's the one other thing I should have mentioned. – E Bazan Sep 11 '18 at 01:29
  • This select last-child of leftcolumn, then filters it with the classnames, ending in no match. – Poul Bak Sep 11 '18 at 01:52
  • Maybe `.leftcolumn .card.post.show::last-child`? – Jack Bashford Sep 11 '18 at 01:58
  • Just tried it. No dice. Maybe something like this just has to be done through a js script ¯\_(ツ)_/¯ – E Bazan Sep 11 '18 at 02:53
  • Yes, that seems the best. I'll edit my answer. – Jack Bashford Sep 11 '18 at 02:55
1

Looks like it's not possible with CSS, but if you want to give jQuery a try:

$('.card.post.show').last().css("outline", "10px solid black");

Hope it helps.

luenib
  • 360
  • 3
  • 15