Focusing on the final item within a group of different elements using CSS

Question

Focusing on the final item within a group of different elements using CSS

After experimenting with different approaches, I attempted the following;

@mixin text-format{
>p, >ul, >h1, >h2, >h3, >h4, >h5{
    &:last-of-type{
        background-color:green;
    }
}
}

.text-body{
@include text-format;
}

Using Pure CSS

.text-body > p:last-of-type, .text-body > ul:last-of-type, .text-body > h1:last-of-type, .text-body > h2:last-of-type, .text-body > h3:last-of-type, .text-body > h4:last-of-type, .text-body > h5:last-of-type {
  background-color: green;
}

My intention was to target the last element within the div regardless of its type, but only within the specified element types in the selector.

For a visualization, check out the Fiddle provided below; http://jsfiddle.net/bazzle/bcLt62jx/

html css css-selectors pseudo-class

Answer 1

Answer №1

It seems like you're in search of

.text-body > :nth-last-child(1 of p, ul, h1, h2, h3, h4, h5)

mentioned in the Selectors 4 specification (initially introduced as :nth-last-match()). This selector narrows down possible matches to specific element types and selects the last occurrence of those within the parent element, .text-body. Here is an example:

<div class="text-body">
  <h1></h1>
  <p></p>
  <ul></ul>
  <h2></h2>
  <p></p>
  <span></span>
</div>

In this scenario, there are six children, five of which belong to any of p, ul, h1, h2, h3, h4, h5. The last element from these five is the p preceding the span, therefore fulfilling the given selector. The h1 would match a similar expression with :nth-child(), while the span will never satisfy such criteria based on the selector-list — in fact, the span can be represented as :not(p, ul, h1, h2, h3, h4, h5).

Although :nth-child(), :nth-last-child(), and :not() were introduced in Selectors 3, the selector-list argument is a novelty in Selectors 4. However, no implementation currently exists for it, leaving its availability uncertain. Unfortunately, there is no equivalent alternative with current tools since it's fundamentally comparable to this question, except instead of a class selector, it targets the nth (last) child matching a group of options. Both scenarios involve working with the nth occurrence of a subset of an element's children.

You could resort to using JavaScript to, for instance, assign a class to the final instance among these element types during page load. A native DOM/Selectors APIs approach would look like this:

var types = document.querySelectorAll('.text-body > p, .text-body > ul, .text-body > h1, .text-body > h2, .text-body > h3, .text-body > h4, .text-body > h5');
types[types.length - 1].className += ' last';

... which might seem complex compared to the following jQuery solution:

$('.text-body').children('p, ul, h1, h2, h3, h4, h5').last().addClass('last');

Remember that

:nth-last-child(1 of p, ul, h1, h2, h3, h4, h5)

is not equal to

:last-child:matches(p, ul, h1, h2, h3, h4, h5)

as the latter only applies if the last child of its parent belongs to any of those specified element types. Essentially, :last-child:matches(...) corresponds to

p, ul... { &:last-child { ... } }

(referring to Harry's response).

Answer 2

It seems like you're in search of

.text-body > :nth-last-child(1 of p, ul, h1, h2, h3, h4, h5)

mentioned in the Selectors 4 specification (initially introduced as :nth-last-match()). This selector narrows down possible matches to specific element types and selects the last occurrence of those within the parent element, .text-body. Here is an example:

<div class="text-body">
  <h1></h1>
  <p></p>
  <ul></ul>
  <h2></h2>
  <p></p>
  <span></span>
</div>

In this scenario, there are six children, five of which belong to any of p, ul, h1, h2, h3, h4, h5. The last element from these five is the p preceding the span, therefore fulfilling the given selector. The h1 would match a similar expression with :nth-child(), while the span will never satisfy such criteria based on the selector-list — in fact, the span can be represented as :not(p, ul, h1, h2, h3, h4, h5).

Although :nth-child(), :nth-last-child(), and :not() were introduced in Selectors 3, the selector-list argument is a novelty in Selectors 4. However, no implementation currently exists for it, leaving its availability uncertain. Unfortunately, there is no equivalent alternative with current tools since it's fundamentally comparable to this question, except instead of a class selector, it targets the nth (last) child matching a group of options. Both scenarios involve working with the nth occurrence of a subset of an element's children.

You could resort to using JavaScript to, for instance, assign a class to the final instance among these element types during page load. A native DOM/Selectors APIs approach would look like this:

var types = document.querySelectorAll('.text-body > p, .text-body > ul, .text-body > h1, .text-body > h2, .text-body > h3, .text-body > h4, .text-body > h5');
types[types.length - 1].className += ' last';

... which might seem complex compared to the following jQuery solution:

$('.text-body').children('p, ul, h1, h2, h3, h4, h5').last().addClass('last');

Remember that

:nth-last-child(1 of p, ul, h1, h2, h3, h4, h5)

is not equal to

:last-child:matches(p, ul, h1, h2, h3, h4, h5)

as the latter only applies if the last child of its parent belongs to any of those specified element types. Essentially, :last-child:matches(...) corresponds to

p, ul... { &:last-child { ... } }

(referring to Harry's response).

Answer 3

Answer №2

If you want to target the last child within a parent element regardless of its element type, you can achieve this by using the simple :last-child selector as shown below:

& > :last-child{
  background-color:green;
}

This selector will style the last child within the .text-body class without considering the element type.

In the following code snippet, you can observe how the background-color: green is applied to the last child of both .text-body blocks, even though the last child in the first block is a p and in the second block is a span.

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body >:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </p>
</div>

On the other hand, if you only want to select the last child when its element type matches a specific list of values, you can use the last-child selector with additional criteria like below:

>p, >ul, >h1, >h2, >h3, >h4, >h5{
    &:last-child{
        background-color:green;
    }
}

This selector will style the last child if its element type is among p, ul, h1, h2, h3, h4, h5.

If the element type of the last child does not match these values, the style won't be applied. In the provided code snippet, you can see how the background-color: green is only applied to the last child of the first .text-body block but not to the second one where the last child is a span.

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body > p:last-child,
.text-body > ul:last-child,
.text-body > h1:last-child,
.text-body > h2:last-child,
.text-body > h3:last-child,
.text-body > h4:last-child,
.text-body > h5:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </p>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <span>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </span>
</div>

Answer 4

If you want to target the last child within a parent element regardless of its element type, you can achieve this by using the simple :last-child selector as shown below:

& > :last-child{
  background-color:green;
}

This selector will style the last child within the .text-body class without considering the element type.

In the following code snippet, you can observe how the background-color: green is applied to the last child of both .text-body blocks, even though the last child in the first block is a p and in the second block is a span.

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body >:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </p>
</div>

On the other hand, if you only want to select the last child when its element type matches a specific list of values, you can use the last-child selector with additional criteria like below:

>p, >ul, >h1, >h2, >h3, >h4, >h5{
    &:last-child{
        background-color:green;
    }
}

This selector will style the last child if its element type is among p, ul, h1, h2, h3, h4, h5.

If the element type of the last child does not match these values, the style won't be applied. In the provided code snippet, you can see how the background-color: green is only applied to the last child of the first .text-body block but not to the second one where the last child is a span.

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body > p:last-child,
.text-body > ul:last-child,
.text-body > h1:last-child,
.text-body > h2:last-child,
.text-body > h3:last-child,
.text-body > h4:last-child,
.text-body > h5:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </p>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born...
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <span>
    Nor again is there anyone who loves or pursues or desires to obtain pain...
  </span>
</div>

Focusing on the final item within a group of different elements using CSS

Answer №1

Answer №2

Similar questions

Retrieve content from the pushState state object

Having trouble with jQuery's scrollLeft function on elements that are not currently visible

directive scope is not functioning

What are some ways to prevent Bootstrap cards with images from stretching too far and creating additional white space?

Center the ordered list using margin:auto

CSS Conditional Enrollment feature malfunctioning

Tips for Modifying CSS Design for Unhovered Elements

Press the "Enter" key to automatically submit the form and validate the input

What could be causing the header of the datatable to be out of alignment with the rest of

Traversing through an array and populating a dropdown menu in Angular

What is the best way to retrieve data from a database, display it in an editable table, and then export

After hovering, move the cursor into the input field

What could be the reason for the CSS file not getting applied to the HTML in my project?

Select a specific item from an array and reveal the corresponding item at the matching index in a separate array

Implementing Bootstrap 4 Beta's server-side validation post error resolution

Mastering the art of customizing jQuery Mobile skins

Styling does not affect an Angular component that is injected into an iframe

Creating distinct web addresses for various sections of vue.js pagination

What steps can I take to address security issues related to iframes?

Tips for positioning "THANK YOU" in the center