Clever Geek Handbook

Css targeting category

In wordpress, I have an article in mine content.php

that creates a grid of images from featured-thumbnail

posts. This code snippet puts the title (the_title();)

and category heading(the_category(', '))

Html

<div class="title-styling">
   <a href="<?php the_permalink(); ?>" rel="bookmark"><h1><?php the_title(); ?></h1></a>
   <a href="<?php the_permalink(); ?> "><h2><?php the_category(', '); ?></h2></a>
</div>

I want to customize the css attributes on the text the_category(', ')

, like changing color, etc. But my CSS doesn't seem to affect it (especially color), even when added !important

.

CSS (attempts that didn't work):

.title-styling > h2 {
  color: #fff;
  font: 500 15px/10px "Open Sans";
}

.title-styling h2 {
 color: #fff;
 font: 500 15px/10px "Open Sans";
}
+3


source to share


2 answers


Try using the following

.title-styling > a > h2.title-category {
  color: #fff;
  font: 500 15px/10px "Open Sans";
}

And this if you want to remove the underline of the anchor tag (link) [optional]

.title-styling > a {
  text-decoration: none;
}


UPDATE:

Try to give a class to h2 tag for more fine tuning

<div class="title-styling">
   <a href="<?php the_permalink(); ?>" rel="bookmark"><h1><?php the_title(); ?></h1></a>
   <a href="<?php the_permalink(); ?> "><h2 class="title-category"><?php the_category(', '); ?></h2></a>
</div>
+1


source


represents its parent .title-styling

try below:



.title-styling  h2 {
  color: #fff;
  font: 500 15px/10px "Open Sans";
}
0


source






More articles:


All Articles