CODEWITHSUNDEEP
htmlcsscss-selectors
Doug Fir
Doug Fir

Reputation: 21212

Controlling elements with the same ID differently on different pages

It's my understanding that classes should be used for elements that will appear throughout a website, whereas IDs should be for truly unique elements. I have a website built on a mapping platform. There is a div on the home page #map which is really front n centre of the whole website. So I played around with and edited the CSS till I was happy with how it looked on the home page.

But, when someone adds content (called a report), the report view also uses this same div with id map.

Is it possible to manipulate divs of the same ID differently? The map on the home page is 700px whereas the one on the report pages should be about 300px.

The map html on the home page is:

<div class="map " id="map"></div>
<div id="mapStatus">
    <div id="mapScale"></div>
    <div id="mapMousePosition"></div>
    <div id="mapProjection"></div>
    <div id="mapOutput"></div>
</div>
<!-- / map --><div class="slider-holder">
    <form action="https://example.com/main" method="get">
        <input type="hidden" value="0" name="currentCat" id="currentCat"/>
        <fieldset>
            <label for="startDate">From:</label>
            <select name="startDate" id="startDate"><optgroup label="2013"><option value="1375329600" selected="selected" >Aug 2013</option><option value="1378008000">Sep 2013</option><option value="1380600000">Oct 2013</option></optgroup></select>
            <label for="endDate">to:</label>
            <select name="endDate" id="endDate"><optgroup label="2013"><option value="1378007999">Aug 2013</option><option value="1380599999">Sep 2013</option><option value="1383278399" selected="selected" >Oct 2013</option></optgroup></select>
        </fieldset>
    </form>
</div>

And the html surrounding the map on the report pages is:

<div id="report-map" class="report-map">
                <div class="map-holder" id="map"></div>
        <ul class="map-toggles">
          <li><a href="#" class="smaller-map">Smaller map</a></li>
          <li style="display:block;"><a href="#" class="wider-map">Wider map</a></li>
          <li><a href="#" class="taller-map">Taller map</a></li>
          <li><a href="#" class="shorter-map">Shorter Map</a></li>
        </ul>
        <div style="clear:both"></div>
            </div>
        </div>

I tried using the selector

#report-map, .report-map {width: 300px;} to override but with no success.

Can anyone see how I could do this? I need the main map on the home page to remain 700px and the map on the report pages to be 300px.

The site is here if anyone wants a peek: http://tinyurl.com/c8djrvr

Upvotes: 0

Views: 139

Answers (1)

BoltClock
BoltClock

Reputation: 723618

An element ID only needs to be unique within one page. If you have the same ID on different pages, you're not doing anything wrong as long as each page has exactly one element with that ID, no matter which element that may be.

To select #map only when it occurs within #report-map, simply use:

#report-map #map { width: 300px; }

Upvotes: 3

Related Questions