Des catégories différentes...

[Shiyami]

Bonjour/Bonsoir à vous !

Aujourd'hui, je me tourne vers vous pour savoir comment faire une chose pareille :

Image:

Comme vous le voyez, une catégorie s'affiche autrement sur le modèle. Il s'agit de la troisième catégorie sur l'Index. Je ne vous demande pas de le coder, loin de là !
Je voudrais simplement savoir comment faire une telle chose. Je sais que les nthchild existent mais je ne sais pas comment les utiliser ni si ce serait une bonne technique...

Si vous pouvez m'aider, je vous en serais reconnaissante ! Merci en tout cas en avance !

Shiyami~

[Shiyami]

Up ↑

[Walt]

Bonjour,

Deux solutions :

• soit recourir à la pseudo-classe :nth-child(), l'avantage étant que c'est une solution 100% CSS, mais l'inconvénient peut résider dans certaines permissions. Par exemple si la catégorie n°2 n'est pas visible aux invités, cibler la 4ème catégorie via le CSS pourra poser problème parce que cette 4ème catégorie ne sera que la 3ème pour les invités (et c'est valable également avec des accès modérateur / administrateur). Si vous choisissez cette solution, le lien donné précédemment devrait vous aider à appréhender le fonctionnement de cette pseudo-classe.
  
  
• soit utiliser un script identifiant la catégorie concernée. Dans ce cas, il s'agirait d'éditer le titre de la catégorie pour la renommer de cette manière :
  

  Code:

  <span id="differentCat">Nom de la catégorie</span>

  
  Puis un script de ce type :
  

  Code:

  $(function() {
  $('#differentCat').closest('.classeDuBlocCategorie').addClass('thisCatIsDifferent');
});

  
  Qui va trouver l'élément #differentCat, rechercher le parent .classeDuBlocCategorie (qui serait donc le conteneur global d'une catégorie), et lui ajouter la classe .thisCatIsDifferent
  
  Vous n'aurez plus ensuite qu'à modifier le CSS de chaque élément contenu dans le bloc .classeDuBlocCategorie.thisCatIsDifferent pour lui donner une apparence différente.

Cordialement,
Walt

[Shiyami]

D'accord !
Je vais étudier votre réponse et faire des tests :3
Merci beaucoup !

[Shiyami]

Bonsoir !
Je mets en résolu pour l'instant car je n'ai plus accès à mon PC qui fait des siennes.
Merci beaucoup encore une fois !