Comment ajouter un nom de classe aléatoire à un élément dans le modèle de blogger

Question

Je souhaite ajouter un nom de classe aléatoire de (class1, class2, class3, class4) à l'élément #tagcat.

Comment puis-je faire cela? Est-il possible de le faire sans javascript?

<b:if cond='data:top.showPostLabels and data:post.labels'> 
    <b:loop index='i' values='data:post.labels' var='label'> 
    <b:if cond='data:i == 0'> 
     <div class='alt-cat blurple-gradient' id='tagcat' title='ds'> 
     <a expr:href='data:label.url' rel='tag'> 
      <data:label.name/> 
     </a> 
     </div> 
    </b:if> 
    </b:loop> 
</b:if> 
</div> 

EDIT

C'est le code complet qui affiche les 8 messages récents sur la page d'accueil de mon blog:

<div class='entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'> 

    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <data:post.body/> 
    <b:else/> 
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
     <data:post.body/> 
     <b:else/> 
     <div class='post-media'> 
     <b:if cond='data:post.firstImageUrl'> 

      <div class='image-wrap'> 
      <!-- <div class='mask'/> --> 
      <a expr:href='data:post.url'> 
       <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' /> 
      </a> 

      </div> <b:else/> 
      <div class='needo' /> </b:if> 


     <script class='java' expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=labelset&quot;' type='text/javascript' /> 


     <b:if cond='data:top.showPostLabels and data:post.labels'> 
      <b:loop index='i' values='data:post.labels' var='label'> 
      <b:if cond='data:i == 0'> 

       <div class='alt-cat blurple-gradient' id='tagcat' title='ds'> 
       <a expr:href='data:label.url' rel='tag'> 
        <data:label.name/> 
       </a> 
       </div> 
      </b:if> 
      </b:loop> 
     </b:if> 
     </div> 
     <div class='post-body'> 

     <div class='post-title'> 
      <h2> 
      <a expr:href='data:post.url'><data:post.title/></a> 
      </h2> 
     </div> 
     <div class='post-entry'> 
      <p><data:post.snippet/></p> 
     </div> 

     <div class='post-author'> 
      <!-- 
            <div class='image-thumb'> 
            <img alt='Post Author' expr:src='data:post.authorPhoto.url'/> 
            </div> 
--> 
      <div class='name-author'> 
      <data:post.author/> 
      <div class='time-stamp'> 
       <data:post.timestamp/> 
      </div> 
      </div> 
     </div> 

L'élément #tagcat affiche l'étiquette. Je veux ajouter des classes différentes sur l'élément #tagcat pour différents messages afin qu'ils apparaissent dans des couleurs différentes, , donc j'ai besoin de CSS différents pour l'étiquette de différents extraits de poste.

Answer 1

Pourquoi ne pas utiliser le nom de l'étiquette de poste en classe et le style de chaque étiquette avec css

<div expr:class='data:label.name' id='tagcat' title='ds'> 

CSS

.label-name { color: your color }