Question: In wordpress I have an article in my `content.php` which creates a grid of images out of the `featured-thumbnail` of posts. This snippet of code puts the post title `(the_title();)` and the category title `(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 target the css attributes of `the_category(', ')` text like change colour padding etc. But my CSS doesn't seem to affect it (especially colour), even with `!important` added.

**CSS** (attempts that did not work):

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

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

```

Answer: 
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 giving a class to the h2 tag to target it more specifically

```
<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>

```
> 
> represent it parent must .title-styling
> 
> 
> 

try below:

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

```