Con el sistema de anidados actualmente es complicado -por no decir imposible- modificar con CSS el aspecto del bloque completo de los propios comentarios. El motivo es que salvo por un selector bautizado comoblog-author, que es el único que marca los comentarios del autor del post, no hay manera de llegar a esos comentarios para darles estilo.El problema es que ese selector sólo afecta a la cabecera del comentario, es decir, a una sección dónde sólo encontramos el nick y la fecha, por lo que si aplicamos reglas ahí, sólo nos cambiará esa cabecera y no todo el bloque del comentario que es lo que a veces deseamos.En un anterior post se explicó cómo hacer eso que sí que es sencillo, consiguiendocambiar el icono que acompaña a nuestro nick y algunas modificaciones en la tipografía. Ahora lo que haremos será modificar todo el bloque, pero recurriendo a jQuery.Aquellos que sólo precisen el código y no necesiten ninguna explicación, por favor pasen de manera ordenada al final del post. Gracias. Les deseamos un feliz viaje :)
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)li.comment .comment-header .blog-author {reglas}
Pero no puedo hacer nada para que un determinadoli.comment tenga determinadas reglas sí y sólo si uno de sus hijos tiene unblog.author. No sé, en caso de que existiera sería algo así, pero insisto en que esto no es interpretable... si acaso lo aporto como idea para cuando saquen CSS4 ;)li.comment {reglas} .comment-header .blog-author
Esto que es muy evidente para cualquiera que controle un mínimo las bases de CSS es obvio, pero para mí que sólo aprendo a golpes, el llegar a esta conclusión me ha costado muchos cabezazos contra la pared, así que ahí queda explicado para que otros no perdáis el tiempo lastimosamente como un servidor.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 )Pero con esto sólo los localizamos. Para poder dar estilo tranquilamente desde CSS, un sistema podría ser añadirle determinada clase especial creadaad hoc para que se quede algo así:... 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 ...
li.comment.ESPECIAL {reglas}
Como:has() selecciona cualquier caja que tenga el selector buscado y esto no nos interesa porque en determinados casos nos tomaría no sólo nuestros comentarios, sino todos los que estén a continuación aunque no sean nuestros, echamos mano adicionalmente de un segundo selector jQuery:.closest() | Para cada elemento en el bloque, selecciona el PRIMER elemento que coincide con el selector indicado comprobando dentro y hacia arriba (ascendientes) en el árbol DOM.Más información sobre.closest() en la página del enlace.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 src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/
A continuación agregamos las instrucciones que hemos visto antes más otra que añadirá una clase con nombrecomenautor al elemento de lista seleccionado, que es ni más ni menos el que tenga dentro una caja con la claseblog-author. Con esto ya tendremos nuestros propios comentarios marcados con esa clase (comenautor).script type='text/javascript' //
