Orientation of the last element among a set of element types using CSS

Question

I tried this

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

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; } 

This selects the last instance of each of these element types, but exclusively for this element type. I just want to select the last element in the div no matter what it is, but within the specified types of elements in the selector.

Violin; http://jsfiddle.net/bazzle/bcLt62jx/

Answer 1

It looks like you can search

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

from Selectors 4 (originally indicated as :nth-last-match() ). This limits the list of possible matches to only these types of elements and selects the last occurrence of them in the parent .text-body element. Illustration:

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

There are six children in this example, five of which are any p, ul, h1, h2, h3, h4, h5 . The last element of the five is p , which immediately precedes the span , so it matches the selector above. h1 will correspond to the equivalent expression :nth-child() , and span will never match the expression specified in the selection list - in fact, the span itself can be expressed as :not(p, ul, h1, h2, h3, h4, h5) .

While :nth-child() :nth-last-child() and :not() were introduced in Selectors 3, the selector list argument is new to Selectors 4. But no one has implemented it yet and no one knows , when it will be. Unfortunately, there is no equivalent using what is currently available, since it is basically the same as this question , but instead of the class selector, you are looking for the nth (last) child matching the option pool. In both situations, you are dealing with the nth occurrence of some subset of children.

It is best to use JavaScript, for example, add a class to the last instance among these element types when loading the page. Something like this with the native DOM / Selectors APIs:

 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'; 

... this is pretty nasty compared to the following jQuery:

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

---

note that

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

not equivalent

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

since the latter corresponds to the last child of his parent, if and only if he is one of these types of elements. In other words :last-child:matches(...) is the equivalent of Selectors 4 p, ul... { &:last-child { ... } } (second part of Harry's answer).

Answer 2

If you need to select the last child in the parent, regardless of its element type, you need to use a simple :last-child selector, as shown below:

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

The above selector will select last-child within the .text-body , regardless of what type of element it is.

In the snippet below, you can see how background-color: green applies to last-child for both .text-body blocks, even if last-child has p in the first block and span in the second block.

 .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 and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </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 of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </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 and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </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 of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </span> </div> 

---

On the other hand, if you want to select the last child only when its element type is one of the list of values, you need to use the last-child selector with additional criteria, as shown below:

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

The above selector will select last-child when its element type is one among p , ul , h1 , h2 , h3 , h4 , h5 .

If the type of the last-child element is something other than this, then the combination criteria will not be matched, and therefore the style will not be applied. In the snippet below, you can see how background-color: green is applied to the last-child first .text-body , and not to the second .text-body , because in the second, the last child is 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 and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </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 of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </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 and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </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 of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </span> </div>