Destacar los comentarios del autor (jQuery para localizar ascendientes)

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 como blog-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, consiguiendo cambiar 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-header><cite 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.

Obsérvese que la primera respuesta tiene en el tag cite un blog-author. Ese selector lo inserta Blogger automáticamente, pero sólo cuando el comentario/respuesta en cuestión es del autor del post. Esa es nuestra clave... y también el problema.

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 en anteriores 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 determinado li.comment tenga determinadas reglas sí y sólo si uno de sus hijos tiene un blog.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 cajas li.comment que tengan dentro (descendientes) alguna clase blog.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)')

Pero con esto sólo los localizamos. Para poder dar estilo tranquilamente desde CSS, un sistema podría ser añadirle determinada clase especial creada ad 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>
              ...

De esta maner luego podríamos hacer esto otro:

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 nombre comenautor al elemento de lista seleccionado, que es ni más ni menos el que tenga dentro una caja con la clase blog-author. Con esto ya tendremos nuestros propios comentarios marcados con esa clase (comenautor).

<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $(".blog-author").closest("li.comment").addClass("comenautor");
  });
//]]>
</script>

¿Qué queda? Pues ya sólo añadir en nuestro CSS (entre las etiquetas skin) el estilo que queramos para los distintos elementos que hay dentro de esa lista, esos que vimos en el esquema del principio. Por ejemplo esto cambia el color de fondo y el borde de todo el bloque y del avatar. Del nuestro, por cierto.

<style type='text/css'>
  li.comment.comenautor > .comment-block,
  li.comment.comenautor > .avatar-image-container {
    background-color: #FDFAEC;
    border-color: #FCF7DC;
  }
</style>

---

Cambiando clases y reglas, podréis conseguir más efectos. Otro por ejemplo podría ser hacer más grande el propio avatar:

li.comment.comenautor > .avatar-image-container,
li.comment.comenautor > .avatar-image-container img {
width: 80px;
height: 80px;
}

O quizás ponerle una marca al bloque entero:

.comment.comenautor > .comment-block {
position: relative;
}
.comment.comenautor > .comment-block:after {
content: "\2716";
position: relative;
top: 0;
right: 0;
font-size: 30px;
color: blue;
}

Mucho más fácil hacerlo que explicarlo. Como casi siempre.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter