adding id to a CSS - html

Question

I am referring to a CSS code from here. I have created a sample html and CSS file as shown there and It's working fine. However, I want to use this code in other place where ul,li have been already defined styles using another CSS file. So, i searched a bit and read that in this case, the solution is to use specific ids for elements so they will be distinguished. Can anyone please tell how to add ids to following CSS as I am confused because of their parent-child nesting in CSS code..
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

Answer 1

Follow this semantic structure...
Your HTML:
<nav id="mainmenu"> ... </nav>
<nav id="sidemenu"> ... </nav>
Your CSS:
nav#mainmenu ul {
...
}
nav#sidemenu ul {
...
}
This should allow distinction from there.

Answer 2

In the html, you would find the specific ul and li elements and add id="unique_name" (ie: ). Then, in the CSS, you would add #unique_id to style that element. For example:
HTML
<ul id="myUL">
CSS
#myUL {
background: red;
}

Answer 3

If you are wanting to apply your CSS to a specific nav object, you could just replace nav in the css with a your id like this
.newId ul ul {
display: none;
}
.newId ul li:hover > ul {
display: block;
}
.newId ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
.newId ul:after {
content: ""; clear: both; display: block;
}
.newId ul li {
float: left;
}
.newId ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.newId ul li:hover a {
color: #fff;
}
.newId ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
.newId ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.newId ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.newId ul ul li a {
padding: 15px 40px;
color: #fff;
}
.newId ul ul li a:hover {
background: #4b545f;
}
This will apply the given CSS to a nav object with the id "newId".

Answer 4

In css you access a member via its id using #
so if you were to set the ul li inside a nav that has the id myNav you would write
nav#myNav ul li {...}
keep in mind that id of course has to exist in your html (and may by standard only exist once per id)
<nav id="myNav"><ul><li>.....</li></ul></nav>

Answer 5

to add ids to css rules, just add # and id identifier (without spaces!) after the element, like:
nav ul#fisrtUlId ul#secondUlId {
display: none;
}
You can get the same result without using ids just including the css you provided after the existing one you mentioned. As long as the rules in the first css are not more descriptive, the rules for the same elements defined in the second css file will take precedence, which is I believe you want to accomplish here.