Unable to modify H3 tag

What theme are you using and where did you get it from?

Hi Jose, thanks for replying.

I’m using a child theme of the WordPress twentyeleven theme.

The code from my original post (above) is from the twentyfifteen theme because I was desperate to try something new to get H3 to work.

The original twentyeleven theme code for H3 doesn’t work either. Same exact problem where H1 and H2 are ok but H3 doesn’t change.

This is the original twentyeleven theme code that didn’t work either when trying to change the H3 tag:

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
color: #000;
font-weight: bold;
margin: 0 0 .8125em;
}
.entry-content h3,
.comment-content h3 {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

I wonder where else in the theme the H3 attributes are being set? I’ve searched for H3 but don’t see anything.

Link to a post with a H3 tag might help. We can examine the tag to see where the style is coming from. I use Firefox’s built-in Inspect Element.

Hi Mark

That’s very useful, thanks. I didn’t know about the Inspect Element. I just used it and if I’m not mistaken, the parent theme (twentyeleven) is overwriting the child. Hmmm. I wonder why that is.

Perhaps you can identify and relay a better understanding to me? Here’s a test page where I was looking at the H3 tag:

https://socialworkacademy.com/?page_id=3300

Thanks for your help.

As this is my first attempt at a child theme, I thought I’d include more information. I don’t know if it’s relevant but the functions.php for the child theme looks like this:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

And the child theme style.css header looks like this:

/*
 Theme Name:   Twenty Eleven Child
 Theme URI:    https://www.socialworkacademy.com/themes/twentyeleven-child/
 Description:  Twenty Eleven Child Theme
 Author:       Manning
 Author URI:   https://socialworkacademy.com
 Template:     twentyeleven
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyeleven-child
*/

Try using #content .entry-content h3, #content .comment-content h3 in your child’s style.css file

Hi Esmi. Is that different to my post #4 above?

A question to anyone: How does the child and parent theme work regarding code then? I mean if type in my child style.css:

#content .entry-content h3, #content .comment-content h3

and this line of code is in the parent style.css, will the parent style.css be used?

Why is it that the parent style.css is being used (according to Firefox’s Inspect Element Tool)? Shouldn’t all the child’s theme code be just from the child and not the parent?

Is that different to my post #4 above?

Yes. The #content selector has been added to the CSS rule to apply greater CSS specificity and, thus, over-ride the parent’s rule.

Hi Esmi. Thanks for that. It worked. ?? I appreciate your help.

So can I use #content before any piece of code and will that override any parent code?

Sorry but it’s not that easy. ??

It depends upon what theme you are using, what classes & ids it sets up, what is already in its stylesheet and what element you are trying to format. In this specific instance, #content should work for an h3 in the post/page body but it wouldn’t necessarily work elsewhere in the theme.

haha, ok. Thank you for answering.