La estructura de los comentarios anidados de Blogger
Me voy a apoyar en este esquema para que me sea más fácil explicar dónde está el problema y cómo se soluciona.Como veis, Blogger monta cada comentario con una serie de elementos independientes.Cada grupo comentario+respuestas van dentro de un elemento de una lista (ol) en la que el primer comentario es un elemento normal (li) y las respuestas se almacenan dentro de una segunda lista anidada en la primera (ol li ol li). Tanto la principal como la anidada llevan la clase.comment (bloque rojo).Luego, para formar cada comentario (o respuesta) hay dos cajas, la del avatar (verde) y la que llevará el resto de datos (.comment-block, azul). A su vez, dentro de esta última tendremos una cabecera (.comment-header, púrpura) y un cuerpo de texto (.comment-content, amarillo).En el dibujo utilicé la respuesta para marcar estas dos últimas clases con colores, sólo por cuestión de falta de espacio pero como dije, realmente estarían dentro del bloque azul. Para cada bloque comentario/respuestas la estructura se repetiría.Esto mismo codificado, o lo que es lo mismo, su estructura HTML, sería así para un comentario y su primera respuesta. He omitido algunas partes que para lo de hoy no nos interesan.ol !-- Bloque comentarios y sus respuestas -- li class='comment' !-- Comentario -- div class="avatar-image-container".../div div class="comment-block" div class='comment-headercite class="user".../cite ... /div div class='comment-content.../div /div /li li ol !-- Respuestas -- li class='comment' !-- Primera respuesta -- div class="avatar-image-container".../div div class="comment-block".../div div class='comment-header cite class="user blog-author".../cite ... /div div class='comment-content.../div /div /div /li li class='comment' !-- Segunda respuesta -- etc.Centrando el problema
Nosotros necesitamos dar estilo a.comment-block, pero no a todas las cajas con ese selector, sino sólo y necesariamente a los que DESPUÉS tengan un.comment-header que a su vez incluya un.blog-author.Como vimos enanteriores entradas, CSS va en sentido descendente por lo que puedo dar estilo sin problemas a un selector que tenga determinado padre:(Las reglas se aplican a las cajas marcadas con blog-author que sean hijas de comment-header y nietas de li.comment)La solución: Localizar ascendientes con jQuery y marcarlos
Como decía anteriormente, lo que nosotros necesitamos es localizar las cajasli.comment que tengan dentro (descendientes) alguna claseblog.author y si bien con CSS no se puede hacer, con jQuery está chupado porque existe un selector llamado:has() que precisamente hace eso.:has() | Selecciona elementos que contienen al menos un elemento que coincida con el selector especificado.(Seleccionar aquellos div que tengan como descendientes (directos o no) un párrafo )$('div:has(p)')... li ol !-- Respuestas -- li class='comment ESPECIAL' !-- Primera respuesta -- div class="avatar-image-container".../div div class="comment-block".../div div class='comment-header cite class="user blog-author".../cite ...
El código
Lo primero es cargar la librería jQuery desde nuestra plantilla. Si no se dispone de ella hay que insertar una línea como esta antes de/head:script type='text/javascript' //



