Home/ Questions/Q 6212627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:33:01+00:00

Let suppose i have two html pages p1 & p2 and it uses different

  • 0

Let suppose i have two html pages p1 & p2 and it uses different layouts l1 & l2 respectively. I have to design the two different layouts and i only want to use common ID names. I just tried to let you understand that what i have in my mind, pls conisder js fn too (id does matter when we use js).

  commonPage.css
    p1 > l1 > #right { width:25%; height:25% .... }
            > #left  { width:25%; height:25% .... }  

    p2 > l2 > #right { width:30%; height:35% .... }
            > #left  { width:30%; height:35% .... }

follwing are html pages :

 p1.html
  <html> <head> <link rel="stylesheet" href="commonPage.css" type="text/css"/>
   </head> <body>  
   <div id = "l1.right"></div>        <div id= "l1.left"></div>   </body></html>

 p2.html
  <html> <head> <link rel="stylesheet" href="commonPage.css" type="text/css"/>
   </head> <body>
     <div id = "l2.right"></div>    <div id= "l2.left"></div>   </body></html>

@Edit My Question is : how to write same Id names for many html tags with different properties and it should not affect to each other.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t identify HTML elements in a page by the page’s file name, so you have to either put the unique styles in style tags in each page, or use IDs/classes for each page.

    In p1.html, give your body element an ID of p1, name it p2 in p2.html, name both of your divs right and left respectively, so your HTML looks like this (showing only body contents):

    p1.html

    <body id="p1">
  <div id="right"></div> 
  <div id="left"></div>
</body>

    p2.html

    <body id="p2">
  <div id="right"></div> 
  <div id="left"></div>
</body>

    Then use these selectors:

    #p1 > #right 
#p1 > #left 
#p2 > #right 
#p2 > #left
    • 0