Chaining CSS pseudo selectors

Question

I'm trying to style the last element differently by using :last-child but I'm having trouble modifying it so that only visible elements are counted.

$(document).ready(function() {
  $(document).on("click", "button", function() {
    $("p:last-child").toggleClass("display-none");
  });
});

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

p:last-child {
  border: none;
}

.display-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p>Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>

In this example, I want the last paragraph to not have a border. When you click on Toggle Display it adds or removes the class display-none on the last paragraph. When this last paragraph is hidden I want the paragraph before it to get the styling it should've had if it were visible.

I tried the following but none worked:

• p:last-child:not(.display-none)
• p:not(.display-none):last-child

So, how do I chain both pseudo selectors so that I can achieve what I want to happen?

Answer 1

You can't. The :last-child is the last-child no matter if it is visible or not. There is no last-child-of-class (or its inverse). What's more, there is no way to style an element based on what classes a later sibling has.

Change your approach. Hide and show the border using another class and use JS to toggle it on the penultimate child.

$(document).on("click", "button", function() {
  $("p:last-child").toggleClass("display-none").prev().toggleClass("no-border");
});

p {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #888;
}

.no-border {
  border: none;
}

.display-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button>Toggle Display</button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum justo eget auctor consectetur. Duis mollis posuere enim, sit amet posuere sem tristique et. Fusce nec nulla tincidunt, fermentum quam vel, mattis purus.</p>

  <p class="no-border">Nulla a est congue, scelerisque turpis vel, egestas urna. Suspendisse ac arcu hendrerit, eleifend lorem sit amet, facilisis erat.</p>

  <p class='display-none no-border'>Praesent vitae quam rhoncus, tincidunt lacus at, sagittis velit. Vivamus lorem purus, congue pellentesque libero vel, molestie ullamcorper risus.</p>
</div>