Changer l'apparence d'un sujet d'annexe

Présentation

Les sujets d'administration (règlement, annexes, ...) peuvent bénéficier d'une apparence différente pour les mettre en avant. Par exemple, on peut lui mettre une couleur de fond différente ou mieux encore : retirer le profil du posteur.

L'astuce présentée peut s'avérer utile pour plein d'autre chose. Nous allons voir un cas pratique mais les possibilités sont nombreuses !

Installation  

Préparer son post
Il y a fort à parier que vos posts importants contiennent un code présentation. Dans mon exemple, mon post contient le code suivant :

Code:

<div class="annexe">
<center>Je suis une super annexe !</center>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote></div>

Personnaliser l'apparence
Toute l'astuce tient à l'utilisation de la pseudo-class :has() qui va nous permettre de faire des modifications à un élément A si cet élément A contient un élément B.
En pratique : .post_row:has(.annexe) si dans le conteneur du post il y a le code de l'annexe je fais des modifications.

Pour faire comme l'exemple, je veux lui donner une autre couleur de fond et le distinguer un peu plus :

Code:

.post:has(.annexe) {
  background-color: var(--neutralDarker);
  border-radius: 5px;
  margin-bottom: 10px;
}

On peut aller plus loin et modifier d'autre élément contenu dans le post. Toujours en suivant l'exemple, on va retirer le profil du post si le post contient le code de l'annexe :

Code:

.post:has(.annexe) {
  background-color: var(--neutralDarker);
  border-radius: 5px;
  margin-bottom: 10px;
  display: block; /* Retire la disposition grille utilisé par le CSS de base du Blank */
}

/* Cache le profil du message */
.post:has(.annexe) .post_profile {
    display: none;
}

Notez bien que tous les posts qui contiendront le code de présentation <div class="annexe"> seront modifiés par le CSS. Essayez d'utiliser un nom de class assez spécifique pour éviter les mauvaises surprises.

Alternative Javascript
Avant l'apparition de :has() (qui est une nouvelle fonctionnalité CSS depuis décembre 2023), j'utilisais du javascript qui ajoutait une nouvelle class. Ce qui aurait donné :

Code:

// Javascript
$(function() {
  $('.annexe').closest('.post').addClass('post_annexe');
});

// CSS
.post_annexe {
  background-color: var(--neutralDarker);
  border-radius: 5px;
  margin-bottom: 10px;
  display: block; /* Retire la disposition grille utilisé par le CSS de base du Blank */
}

.post_annexe .post_profile {
    display: none;
}