Resetting css settings

Question

Hello everybody,

is it possible to reset all css settings to default as soon as a certain html page is accessed?
Reason is, I'm changing the style for a listview for page 'page_2.html' like so

#resultlist.win-listview 
{
    height: 100%; 
    width: 100% ;
    border: 2px solid gray;
    overflow: auto;
}
   
.win-listview .win-surface {
    background-color: #000;
} 

.win-listview .win-container{
    padding: 20px;
    border: 1px solid gray; 
    background-color: #1d5e38;
}

Now if the users navigates back to page_1.html (which also got a listview) I want the styles to be set back to their Default values. Is there an easy way to do this or do I have to manually reset them to their default values (in page_1.css)? Thanks!

Best Regards
--Oliver.

Answer 1

Hi Oliver,

Simply narrow the scope of the CSS rules so that it only changes the particular listview on your page.  You do not need to change it for all .win-listview. (http://www.w3.org/TR/CSS2/selector.html)

You can select by type, id or class.  In your case for your page2 you could create something like this:

<div class="myClass">

... ListView etc in here ...

</div>

and then your css could look something like this.

.myClass .win-listview
{
    height: 100%;
    width: 100% ;
    border: 2px solid gray;
    overflow: auto;
}
  
.myClass .win-listview .win-surface {
    background-color: #000;
}

.myClass .win-listview .win-container{
    padding: 20px;
    border: 1px solid gray;
    background-color: #1d5e38;
}

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thanks Jeff, that did it! :-)