CODEWITHSUNDEEP
csscss-selectors
jeannine
jeannine

Reputation: 3

CSS challenge: display only one instance of an element on a page

I'm trying to display a list of related posts in the location where I have inserted the list as a shortcode, but hide the list where it is inserted automatically by my related posts plugin (MicroKids). I have assigned a class to the shortcode-generated list; I do not have the ability to make any changes to the automatically inserted list.

For example, on http://www.litquake.org/calendar-of-events/the-future-that-never-was, you'll see a list of author names (beginning with Murray, Tina Marie) displayed above the map (the shortcode-inserted list that I want to show) and a repetition of the list of author names displayed below the map (the automatically inserted list that I want to hide).

Here's a simplified version of the code:

<div class="entry-content clearfix">
<p>
<div class="show-related-posts" style="padding-left: 30px;">
<div class="related-posts">
</div>
<div id="em-location-map-ca500" class="em-location-map" style="background: none repeat scroll 0% 0% rgb(205, 205, 205); width: 400px; height: 300px; position: relative; overflow: hidden;">
<div id="em-location-map-info-ca500" class="em-location-map-info" style="display:none; visibility:hidden;"> </div>
<div id="em-location-map-coords-ca500" class="em-location-map-coords" style="display:none; visibility:hidden;">
<div class="related-posts">
<div id="related-posts-MRP_all" class="related-posts-type">
</div>

Does anyone know how I can target one occurrence of the list but not the other?

Upvotes: 0

Views: 1097

Answers (1)

ced-b
ced-b

Reputation: 4065

You have two options:

  1. Either you give them an additional class like class="related-posts related-posts-1" and then select it using that class.

  2. Or you can use the .related-posts:first-child or .related-posts:last-child as a selector.

Upvotes: 2

Related Questions