1

So, I have a collection of div as following for My Page.

 <div class="My_Page"> 
    <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
 </div>

Then I have another page with same class= one and two.

 <div class="Your_Page"> 
    <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
 </div>

However, I am trying to apply different css to class= one and two based on what page they are in.

For example:

  1. My_page: .My_Page .one{width:100%;}

  2. Your_Page: .Your_Page .one{width:50%}

I have one css file which contains both codes.

For either pages, these two css markups are loaded and I feel like there must be more efficient ways to apply different css based on what parental div it is in.

Or am I doing it right?

Thanks

Improve this question
3
  • starting a class with a number is illegal. Commented May 8, 2015 at 21:50
  • It was just an example :P I will edit it Commented May 8, 2015 at 21:50
  • @steveKim I think the most efficient way is to write a common css and then add another one for those which are diffrent. have a look at my answer Commented May 8, 2015 at 21:58

4 Answers 4

Reset to default
2 
.page{ ....  //common css for both page one and two}
.page .one{ width:100% .... //common for both  } 
.page .two{ .... //common for both  } 

.My_page .two{ width:50%;}


<div class="page My_page">
   <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I see. So this involves bit more planning than usual, but I do see that it reduces the overall size which could add up. Thanks Ashkan. I will apply this method once I have the completely css markup. =) Thanks
2

You are doing it correctly, CSS is very lightweight and loading unused code is not overly bad. However if you feel the need to do so you could load page specific CSS files and then have a whole site file that is loaded for all pages.

Improve this answer

1 Comment

I see. Yeah I kind of figured that there is no other way but to have different files. =) Thanks!
2

You are doing it correctly - 

.outerclass .innerclass {  }

will apply the style changes to all instances of this specific scenario.

Improve this answer

2 Comments

Thanks Andrew =) I figured there is no other way but to have different css files. Thanks!
You're welcome. CSS can be a pain but it can be flexible as well. You can do the same thing for ids
1

Since your outer div has a different class, you could use a child selector to do something like this:

.My_Page .one {
    color: red;
}
.Your_Page .one {
    color: blue;
}

In that example, elements with the class one would only be red if they were inside a parent element with a class of My_Page.

Edit after re-reading the question:

Now I see that you seem to already be doing this. Yes, that is fine. You're doing it right. You could also include a different style sheet on each page if you're very concerned about the size of the style sheet. But that's not really necessary in most cases.

Improve this answer

2 Comments

I don't think you understood the OP's question/code... they are asking if there is a better way than having to load css for pages where it isn't needed...
@DrCord. Yeah I noticed after posting that the asker was basically already doing this. I edited my answer to reflect that. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.