CODEWITHSUNDEEP
htmlcss
tigerden
tigerden

Reputation: 728

adding id to a CSS

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;
}

Upvotes: 0

Views: 1053

Answers (5)

jvicab
jvicab

Reputation: 286

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.

Upvotes: 0

DrCopyPaste
DrCopyPaste

Reputation: 4117

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>

Upvotes: 0

StMotorSpark
StMotorSpark

Reputation: 201

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".

Upvotes: 0

Rayan Bouajram
Rayan Bouajram

Reputation: 743

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.

Upvotes: 3

Mr. Mayers
Mr. Mayers

Reputation: 356

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;
}

Upvotes: 0

Related Questions