CSS last-child selector: select last-element of specific class, not last child inside of parent?

Answer 1

If you are floating the elements you can reverse the order

i.e. float: right; instead of float: left;

And then use this method to select the first-child of a class.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

This is actually applying the class to the LAST instance only because it's now in reversed order.

Here is a working example for you:

  
  

    
List 1-1
    
List 1-2
    
List 1-3
  
  

    
List 2-1
    
List 2-2
    
List 2-3
  
  

    
List 3-1
    
List 3-2
    
List 3-3