Me gustaría diseñar dinámicamente cada primer y último elemento en la fila a través de css o js.
<div class"box"> <ui> <li class"one"></li> <li class"two"></li> First <li class"two"></li> <li class"two"></li> <li class"two"></li> Last <li class"one"></li> First <li class"one"></li> <li class"one"></li> <li class"one"></li> <li class"one"></li> <li class"one"></li> <li class"one"></li> <li class"one"></li> Last <li class"two"></li> First <li class"two"></li> <li class"two"></li> <li class"two"></li> <li class"two"></li> <li class"two"></li> Last </ui>.two:last-child selecciona solo un y último elemento en ui, en lugar de múltiples en un mismo problema sin procesar con .two:last-of-type
Aquí hay una manera en que podría intentarlo:
var oneList = document.getElementById("bigList").querySelectorAll(".one"); oneList.forEach(function (item) { if (item.nextElementSibling) { var nextSibling = item.nextElementSibling; if (nextSibling.classList.contains("two")) { item.classList.add("bg-green"); } } }); var twoList = document.getElementById("bigList").querySelectorAll(".two"); twoList.forEach(function (item) { if (item.nextElementSibling) { var nextSibling = item.nextElementSibling; if (nextSibling.classList.contains("one")) { item.classList.add("bg-green"); } } }); /* First */ .one + .two, .two + .one { background-color: red; } /* Last */ .bg-green, #bigList li:last-child { background-color: green; } /* No style on first child */ #bigList li:first-child{ background-color: transparent; } <div class="box"> <ul id="bigList"> <li class="one">1</li> <li class="two">2</li> <!--First--> <li class="two">2</li> <li class="two">2</li> <li class="two">2</li> <!--Last--> <li class="one">1</li> <!--First--> <li class="one">1</li> <li class="one">1</li> <li class="one">1</li> <li class="one">1</li> <li class="one">1</li> <li class="one">1</li> <li class="one">1</li> <!--Last--> <li class="two">2</li> <!--First--> <li class="two">2</li> <li class="two">2</li> <li class="two">2</li> <li class="two">2</li> <li class="two">2</li> <!--Last--> </ul> </div>Aquí está la solución con el código.
<!DOCTYPE HTML> <HTML> <head> <title>Try jQuery Online</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $( document ).ready(function() { var cls="one"; var len = $('ui li').length; $("ui li").each(function(index){ if(cls!=$(this).attr("class")){ $(this).attr("style","background-color:red;"); if(index!=1){ $(this).prev().attr("style","background-color:red;"); } cls=$(this).attr("class"); } if(index === (len - 1)){ $(this).attr("style","background-color:red;"); } }); }); </script> <style> </style> </head> <body> <UI> <li class="one">test</li> <li class="two">First</li> <li class="two">test</li> <li class="two">test</li> <li class="two">Last</li> <li class="one">First</li> <li class="one">test</li> <li class="one">test</li> <li class="one">test</li> <li class="one">test</li> <li class="one">test</li> <li class="one">test</li> <li class="one">Last</li> <li class="two">First</li> <li class="two">test</li> <li class="two">test</li> <li class="two">test</li> <li class="two">test</li> <li class="two">Last</li> </ui>