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";
}
source to share
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>
source to share