html - Select the last element in multiple containers with variable levels of nested children -
how can select last , deepest element in css?
is there way improve css code?
what solution proposed deep tree? (~15-25).
i'm avoiding using javascript. sass solutions welcome.(maybe using @for?)
/*level 1*/ div.case > ul:last-child > li.leaf:last-child > div { font-weight: bold; background: red; } /*level 2*/ div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: blue; } /*level 3*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: green; } /*level 4*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: yellow; }<div class="case"> <h1>case 0</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </div> <div class="case"> <h1>case 1</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </li> </ul> </div> <div class="case"> <h1>case 2</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="leaf"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content</div> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content a</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>case 3</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>case 4</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content(bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>case 5</h1> <ul> <li class="leaf"> <div>content 1</div> </li> <li class="leaf"> <div>content 2</div> </li> <li class="leaf"> <div>content 3(bold)</div> </li> </ul> </div>
if understand question correctly, want target last li tag in multiple uls, number of nesting levels in uls unpredictable. want selector targets "last , deepest element" in containing block number of elements preceding in block unknown , irrelevant.
this doesn't appear possible selectors 2.1 or selectors 3.
the :last-child, :last-of-type , nth-child pseudo-classes work when nesting levels fixed. in dynamic environment there multiple lists of varying nesting levels these selector rules break.
this select last li in first level ul:
div.case > ul > li:last-child { ... } this select last li in second level ul:
div.case > ul > li:last-child > ul > li:last-child { ... } this select last li in third level ul:
div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child { ... } and on...
a solution, however, may exist in selectors 4, browsers haven't yet implemented:
li:last-child:not(:has(> li)) this rule targets last child lis have no descendant lis, matches requirement.
for now, however, if know nesting level each of ul containers can apply class each targeted li.
thanks @boltclock crafting selectors 4 rule (see comments).
Comments
Post a Comment