javascript - CSS Multiple ID with Same Name Work Around?

First I realize ID's should be unique. But right now I can't do much about that. I have a javascript plug-in that is generating ID names and for one page it works great. The issue is in creating another page, it will start over using the same naming convention. For example:

Page 1

<ul id="1">

Page 2

<ul id="1">

So if I am trying to style ul#1 on Page 1 it will also style ul#1 on Page 2. So, any suggestions on how to separate our the two id's? This html is generated by the JS, otherwise I would just attach a class to it.

Thanks.

Page 1

<ul id="1">

Page 2

<ul id="1">

Thanks.

Share Improve this question asked Aug 26, 2010 at 20:04 Xtian 3,58711 gold badges57 silver badges92 bronze badges

3 1 is not a valid HTML ID. Your browser may still recognize it but it's not valid HTML. Just sayin'. – BoltClock Commented Aug 26, 2010 at 20:08
yes, it's not valid HTML4. – Anurag Commented Aug 26, 2010 at 20:09
the id wasn't really "1", that was just an example, but I didn't know that. So thanks – Xtian Commented Aug 26, 2010 at 20:33
It is not valid for HTML5 and in JavaScript and jQuery codes, undoubtedly you earn some weird errors. your CSS codes doesn't work property. Also you will receive critical SEO problems. – AmerllicA Commented Apr 16, 2017 at 9:53

Add a ment |

6 Answers 6

Sorted by: Reset to default 4

First, the unique ID suggestion is restricted to a page. It is perfectly fine to have multiple ID's on different pages. The best way to overe this is to add a ID to the body.

Page1

<body id="Page1">
    <ul id="1">
        <li></li>
    </ul>
</body>

Page2

<body id="Page2">
    <ul id="1">
        <li></li>
    </ul>
</body>

CSS

#Page1 #1
{
    //Some style for page 1, ID 1
}


#Page2 #1
{
    //Some style for page 2, ID 1
}

Can you attach a class around it ? Have a div or span some other element surround your code that does the generation and assign a class to it.

I'd say you have to use different style sheets on each page if you need different styles for the same ids, but this will be a pain to maintain as you make styling changes.

Alternatively you could you assign a class to one of the page's UL tags and then create a style for that class.

First of all, the plugin is still not generating the correct ids because ids can't be numbers. To answer your question, try to figure out some parent element that might be different between the two pages probably in which case you can use CSS such as this:

#parent ul#1{
  /* styles here */
}

#parent2 ul#1{
  /* styles here */
}

page1:

<div id="parent">
  <ul id="1">
    ............

page2:

<div id="parent2">
  <ul id="1">
    ............

So you need to find out a some parent element of ul which is not mon between the two pages. This is the only possibility that es to my mind where you have no control over changing the ids or replacing them with classes since they are being generated by the plugin.

You need something to distinguish them if you want them styled separately. If you cannot modify those tag you could probably use some parent container like:

<div id="parent1">
    <ul id="id1" />
</div>

<div id="parent2">
    <ul id="id1" />
</div>

and then:

#parent1 ul {
    ...
}

#parent2 ul {
    ...
}

Also notice that an id cannot start with a number as in your case. You should probably consider switching/modifying this plugin.

One thing I monly do is attach a class to the body for each page. <body class="home_section"> and then you could style based on that class .home_section ul#1 {}.

Also, IDs must begin with a letter.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745280571a4620257.html

javascript - CSS Multiple ID with Same Name Work Around? - Stack Overflow

6 Answers 6

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - CSS Multiple ID with Same Name Work Around? - Stack Overflow

6 Answers 6

相关推荐