Title: Styling Tag Cloud
Last modified: May 2, 2024

---

# Styling Tag Cloud

 *  Resolved [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/)
 * Hi all, so I have previously styled my tags and categories so that each show 
   in their own coloured box. I wanted to recreate this for my tag cloud and ended
   up with the following:
 *     ```wp-block-code
       .tag-cloud-link {
           display: inline-block;
           flex-grow: 1;
           font-size: 14px;
           font-weight: 600;
           padding: 5px 10px;
           margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
           font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
           line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
       .tag-cloud-link:hover {
           background:rgba(100,100,100, 0.2);
       }
   
       /* Featured - Light Yellow */
       .tag-link-13 {
           background-color:#dcbf37;
       }
   
       /* CSS - Grey */
       .tag-link-11 {
           background-color:#eee;
           color: #000;
       }
   
       /* Customisation - Green */
       .tag-link-12 {
           background-color:#77bb2c;
       }
   
       etc...
       ```
   
 * My question is, is there an easier way to do this as at the moment I am having
   to stipulate each tag ID which is a pain to do. IE For the PHP tag, I have to
   use `.tag-link-17 `
 * However, when styling my post tags and categories I found I could use the name
   of the tag/category like so: `.entry-meta .cat-links a[href*="news"]`
 * Is there a way to do this for the tag cloud too?
 * Additionally, I have noticed that when I try and use the same hover effect that
   I use on my tag cloud for the standard post/category tags it doesn’t work.
 * Currently I have the following:
 *     ```wp-block-code
       /* Tag Cloud Hover which I'd like to keep */
       .tag-cloud-link:hover {
           background:rgba(100,100,100, 0.2);
       }
       ```
   
 *     ```wp-block-code
       /* Post Tags/Categories Hover - I'd like this to be the same the tag cloud */
       .entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
           background:rgba(100,100,100, 0.2);
       }
       ```
   
 * Thank you.

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/styling-tag-cloud/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/styling-tag-cloud/page/2/?output_format=md)

 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17728940)
 * Hi there,
 * if you inspect the block on the frontend in the browser developers tools you 
   should see its HTML eg.
 *     ```wp-block-code
       <p class="wp-block-tag-cloud">
           <a href="http://aug.local/tag/cheese/" class="tag-cloud-link tag-link-18 tag-link-position-1" style="font-size: 22pt;" aria-label="cheese (2 items)">cheese</a>
       </p>
       ```
   
 * So you can see the markup exists for you to use the href eg.
 *     ```wp-block-code
       .wp-block-tag-cloud a[class*="the_tag_term"] {
            /* your styles here */
       }
       ```
   
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729164)
 * Thank you for that. I will amend my code as advised.
 * still learning about CSS and what I can and cannot use from the dev tools. I 
   sort of understand most of it and know the difference between # and . But do 
   struggle when selectors are seemingly merged.
 * How about the hover state issue. Any suggestions?
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729272)
 * The hover state CSS should work, I don’t see why not?
 * Do you have other CSS might conflict with it? If you can provide your site link,
   we can take a look for you.
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729312)
 * This is the main section that styles the tags in the tag cloud:
 *     ```wp-block-code
       .tag-cloud-link {
           display: inline-block;
           flex-grow: 1;
           font-size: 14px;
       	font-weight: 600;
           padding: 5px 10px;
       	margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
       	font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
       	line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
       .tag-cloud-link:hover {
           background:rgba(100,100,100, 0.2);
       }
       ```
   
 * Note the default colours for the background and text. This is there so that I
   can still see tags that have not had a custom style added yet.
 * When I use my original code it styles the relevant tag, IE:
 *     ```wp-block-code
       /* Security - Red */
       .tag-link-18 {
       	background-color:#ff3e00;
       }
       ```
   
 * However, when I use the code that David suggested the tag just shows with the
   default background and text colour defined in the main section.
 *     ```wp-block-code
       .wp-block-tag-cloud a[class*="security"] {
       	background-color:#ff3e00;
       }
       ```
   
 * I can only make the changes on my local development site at the moment as Ying
   is currently helping on another topic where I have had to disable everything,
   including my child theme.
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729331)
 * Yes, David’s CSS overrides the hover state CSS as you only have 1 selector in
   that CSS.
 * Try this to make the selector more specific:
 *     ```wp-block-code
       .wp-block-tag-cloud a.tag-cloud-link:hover {
           background-color: rgba(100,100,100, 0.2);
       }
       ```
   
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729460)
 * I now have the following code:
 *     ```wp-block-code
       .tag-cloud-link {
           display: inline-block;
           flex-grow: 1;
           font-size: 14px;
       	font-weight: 600;
           padding: 5px 10px;
       	margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
       	font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
       	line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
       .wp-block-tag-cloud a.tag-cloud-link:hover {
           background-color: rgba(100,100,100, 0.2);
       }
   
       /* Featured - Light Yellow */
       .wp-block-tag-cloud a[class*="featured"] {
       	background-color:#dcbf37;
       }
       ```
   
 * If you visit: [All Articles – CrikeyThatsMint](https://crikeythatsmint.com/all-articles/)
   and scroll down a bit, you’ll see that the **Featured** tag in the Tag Cloud 
   has the default colours still, as opposed to the light yellow colour that is 
   meant to be showing.
 * ![](https://i0.wp.com/i.postimg.cc/yxjVVP05/tag-cloud.png?ssl=1)
 * ***EDIT**
 * The site is now live again as the other issue has been resolved. Take a look 
   for [yourself](https://crikeythatsmint.com/all-articles/).
 * The above featured tag shows as `class="tag-cloud-link tag-link-13 tag-link-position-
   3"` when viewing it with the dev tools. However, It only seems to work for me
   when I specifically tell it to affect `.tag-link-13` (each obviously has their
   own number).
 * `.wp-block-tag-cloud` doesn’t seem to do anything at all.
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729515)
 * Been playing round on my local dev site and noticed that if I change `.wp-block-
   tag-cloud a[class*="featured"]` to `.wp-block-tag-cloud a` then all tags do indeed
   turn yellow. However, i am of course attempting to style them individually. Just
   thought I would share my findings.
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729543)
 * So what’s the issue now?
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729593)
 * The issue is that I do not want all the tags the same colour… I have them all
   set to their individual colours to match the tags that are shown under each post.
   However, when using my original code I have to stipulate the ID of each. My original
   question was, is it possible to use the tag name instead of the ID (IE `[class*
   ="security"]`).
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729767)
 * I think David was meant to say `.wp-block-tag-cloud .tag-cloud-link[href*="security"]`
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729789)
 * That did the trick. Awesome thank you so much all.
   The only issue now is the 
   hover state…. Currently it just fades the text to black and does not affect the
   colour of the background at all.The plan was to have it alter the opacity of 
   the entire button.This is what I currently have:
 *     ```wp-block-code
       .tag-cloud-link {
           display: inline-block;
           flex-grow: 1;
           font-size: 14px;
       	font-weight: 600;
           padding: 5px 10px;
       	margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
       	font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
       	line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
       .tag-cloud-link:hover {
           background:rgba(100,100,100, 0.2);
       }
   
       /* Featured - Light Yellow */
       .wp-block-tag-cloud .tag-cloud-link[href*="featured"] {
       	background-color:#dcbf37;
       }
   
       /* CSS - Grey */
       .wp-block-tag-cloud .tag-cloud-link[href*="css"] {
       	background-color:#eee;
       	color: #000;
       }
   
       /* Customisation - Green */
       .wp-block-tag-cloud .tag-cloud-link[href*="customisation"] {
       	background-color:#77bb2c;
       }
   
       /* JavaScript - Pale Yellow */
       .wp-block-tag-cloud .tag-cloud-link[href*="javascript"] {
       	background-color:#611ab8;
       }
   
       /* MySQL - Logo Blue */
       .wp-block-tag-cloud .tag-cloud-link[href*="mysql"] {
       	background-color:#00758d;
       }
   
       /* PHP - Logo Blue */
       .wp-block-tag-cloud .tag-cloud-link[href*="php"] {
       	background-color:#8793bc;
       }
   
       /* HTML - Black */
       .wp-block-tag-cloud .tag-cloud-link[href*="html"] {
       	background-color:#000;
       }
   
       /* Security - Red */
       .wp-block-tag-cloud .tag-cloud-link[href*="security"] {
       	background-color:#ff3e00;
       }
   
       /* Tips & Tricks - Red */
       .wp-block-tag-cloud .tag-cloud-link[href*="tips"] {
       	background-color:#ff3e00;
       }
       ```
   
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729790)
 * Do you mean the tag links in the footer meta or the tag links of the tag cloud?
 * If it’s the tag cloud, try change this:
 *     ```wp-block-code
       .tag-cloud-link:hover {
       background:rgba(100,100,100, 0.2);
       }
       ```
   
 * to this:
 *     ```wp-block-code
       .wp-block-tag-cloud a.tag-cloud-link:hover {
       background:rgba(100,100,100, 0.2) !important;
       }
       ```
   
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729795)
 * I tried changing the hover state to match my tags and categories by simply using`
   opacity: 0.4;` but they both behave differently for some reason..
   For example,
   if I set my tags and categories have the following CSS:
 *     ```wp-block-code
       .entry-meta .tags-links a, .entry-meta .cat-links a {
           display: inline-block;
           font-size: 14px;
           font-weight: 600;
           padding: 5px 10px;
           margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
           font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
           line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
   
       .entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
           background:rgba(100,100,100, 0.2) !important;
       }
       ```
   
 * and my tag cloud the same using:
 *     ```wp-block-code
       .tag-cloud-link {
           display: inline-block;
           font-size: 14px;
           font-weight: 600;
           padding: 5px 10px;
           margin: 5px 5px 0px 0px;
           text-decoration: none;
           background-color: var(--base-5);
           color: var(--base-3);
           font: "Oxygen","Arial",Sans-Serif;
           text-transform: uppercase;
           border-radius: 4px;
           line-height: initial;
           -webkit-transition: all .5s ease;
           -o-transition: all .5s ease;
           transition: all .5s ease;
       }
       .wp-block-tag-cloud a.tag-cloud-link:hover {
           background:rgba(100,100,100, 0.2) !important;
       }
       ```
   
 * They both produce a different effect when hovered over.
 * I have updated the live site to use the above CSS for both the tags and categories
   and also the tag cloud. Hover over them to see the difference.
 * See how the tags and categories below each post does what I would imagine and
   simply alters the opacity of both the background and text when hovered over; 
   but when hovering over the tags in the tag cloud the text turns dark.
    -  This reply was modified 2 years, 1 month ago by [Bri](https://wordpress.org/support/users/tinnyfusion/).
 *  [ying](https://wordpress.org/support/users/yingscarlett/)
 * (@yingscarlett)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729801)
 * Where on your site can I see the cloud tag?
 * Let me know 🙂
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/#post-17729805)
 * Go here: [https://crikeythatsmint.com/all-articles/](https://crikeythatsmint.com/all-articles/)
   then scroll down until you can see them side by side like this:
 * ![](https://i0.wp.com/i.postimg.cc/m2c20hjy/tags.png?ssl=1)
 * Now hover over the category or tags below the post and compare it to the tags
   in the tag cloud. They are both using the exact same CSS for their hover states
   so why do they show differently?

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/styling-tag-cloud/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/styling-tag-cloud/page/2/?output_format=md)

The topic ‘Styling Tag Cloud’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 20 replies
 * 4 participants
 * Last reply from: [Alvind](https://wordpress.org/support/users/alvindcaesar/)
 * Last activity: [2 years, 1 month ago](https://wordpress.org/support/topic/styling-tag-cloud/page/2/#post-17734494)
 * Status: resolved