CODEWITHSUNDEEP
css
Chameron
Chameron

Reputation: 2974

css - use !important

case 1
    <body>
        <div id="main1">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>

case 2
    <body>
        <div id="main2">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>

case 3
    <body>
        <div id="main3">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>
    <style>
        #main1 h3{
            font-size: 20px;
            margin:10px;
            padding:20px;
        }

        #main2 h3{
            font-size: 6px;
            margin:15px;
            padding:50px;
        }

        #main3 h3{
            font-size: 23px;
            margin:30px;
            padding:10px;
        }
        div.myClass h3.heading{
            margin:0px;
            padding:0px;
            font-size:10px;
        }
    </style>

myClass seems like a module and will be input somewhere like , case 1, case 2, case 3 .. case n

So that h3 will have another style follow the each of case style

How i can use only style div.myClass h3.heading ?

Note:

Upvotes: 0

Views: 233

Answers (3)

thirtydot
thirtydot

Reputation: 228182

Real answer after even more clarification:

  • You can't edit the HTML of the parent of <div class="myClass">.
  • You don't know what the id of that parent will start with.

I give up. Your situation is ridiculous.

Use inline styles or add an id to your h3 as suggested by @Guffa, or use !important on every rule:

div.myClass h3.heading {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
}

Real answer after clarification:

In your comment, you said you have:

#main1 #main2 ,.. #main n

Due to this fact, you should add a class to each div, like this:

<div id="main1" class="main">
..
<div id="main2" class="main">
..
<div id="main3" class="main">

Then you can use this:

.main h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}
div.myClass h3.heading {
    margin:0px;
    padding:0px;
    font-size:10px;
}

Or if you REALLY can't add a class for some reason:

<div id="main1">
..
<div id="main2">
..
<div id="main3">

along with:

div[id^="main"] h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}
div.myClass h3.heading {
    margin:0px;
    padding:0px;
    font-size:10px;
}

That's using the CSS3 attribute-starts-with selector to find all divs that have an id starting with main. It's better than doing this: 

#main1 h3 {
    font-size: 20px;
    margin:10px;
    padding:20px;
}
#main2 h3 {
    font-size: 6px;
    margin:15px;
    padding:50px;
}
#main3 h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}

Old answer:

You should use this selector:

#main .myClass h3.heading

Note that I changed myclass to myClass - nothing was going to work until that change was made. classes are case-sensitive.

To learn how to solve these types of problem yourself, you should learn about specificity:

#main h3 has a specificity of 0,1,0,1.

div.myClass h3.heading has a specificity of 0,0,2,2.

It's all about the number on the left.

Because you have a 1 in that second column for #main h3 due to the id (#main), you really need to use an id if you want to override it, as in my answer:

#main .myClass h3.heading has a specificity of 0,1,2,1.

Upvotes: 6

Guffa
Guffa

Reputation: 700412

Not use !important or add #main

You have to make the style more specific than the one you want to override. The only possibilities if those two are ruled out, is to either use an id on the element:

<h3 id="heading"> Text Text </h3>

div.myClass #heading {

or to set the style inline:

<h3 class="heading" style="margin:0;padding:0;font-size:10px;"> Text Text </h3>

Upvotes: 1

Ahmed Magdy
Ahmed Magdy

Reputation: 6030

jsut add !important after div.myclass h3.heading font-size

div.myclass h3.heading
{
        margin:0px;
        padding:0px;
        font-size:10px !important;
}

Upvotes: -1

Related Questions