My CSS rule works partly. Can you help me?

Question

This is the main code,

<div id="text-12" class="widget widget_text">
    <div class="heading">
        <h3>
            title
        </h3>
    </div>
    <div class="textwidget">
        text
    </div>
</div>

And I added this CSS rule,

#text-12 {
    font-family: "courier new" !important;
    direction: rtl;
}

Unfortunately, the font-family only work for the class textwidget and I can not apply font-family to heading class with any trick. What is wrong?

One thing more, Page address: http://sciself.com/?page_id=4766 (Right Sidebar)

Answer 1

Maybe your overwriting the font-family of H3 later in your css file?

Edit: I'm quite sure since everything seems the work fine.

<div id="text-12" class="widget widget_text">
<div class="heading">
     <h3>
        Heading
    </h3>

</div>
<div class="textwidget">Textwidget</div>

Note, I've changed the text to made it easier to read (for me)

Jsfiddle example

I inspected your page. You may use some rule more specific to override the parent CSS file. For example,

#sidebar #text-12 .heading h3 {
    font-family: "courier new" !important;
}

Answer 2

Try adding this into your css

#text-12 {
font-family: "courier new" !important;
direction: rtl;
}

#text-12 h3 {
font-family: "courier new" !important;
direction: rtl;
}

Answer 3

try to put

.heading h3{
    font-family: "courier new" !important;
}

It should work.

Answer 4

Maybe it looks different to you because the h3 are bold by default. Try changing the font-weight setting to see if that is what you are looking for.

 #text-12 h3 {
 font-family: "courier new";
 font-weight: normal;
 direction: rtl;
}

You shouldn't have to use the !important - as that is normally bad practice.