Question

I’m getting a bit confused with my work.
My Problem is, I want to change a Element that’s covered with an Element.

the HTML-structure:

<ul class="calendar-content">
 <li>
   <a href="#day02" onClick="popup('02');">
     <span class="day"><strong>02</strong></span>
     <span class="content" id="content">
       <small>02</small>
       <strong>Inhalt Tag 01</strong>
     </span>
    </a>
 </li>

The user is only seeing the first span(class=day). After a click on the link the
second span(class=content) should “appear”.
My first idea was:

  .calender-content .a:visited .content{
  display:block;
  }

Or this one:

  //.calender .content got margin-left:120px and is out of view
  .calender-content .a:visited .content{
  margin-left:0px;
  }

But nothing happens. Maybe it isn’t valid but I saw stuff like this before.
I just want to display the second span after the link is visited.
Either setting the display style to block or changing the margin to 0 and animate that with
-transition.
But nothing the styles doesn’t appear on the span element.

If there’s a way arround in CSS, that would be great. So I don’t have to use JS.

Cheers Dan

Answer 1

Should be:

.calendar-content a:visited .content { display: block; }

You have “.a”, which means “elements with class ‘a'”, not “elements with tag name ‘a'” 🙂

Now the thing is, I’m not sure that “:visited” will be “true” (or whatever the appropriate term would be) if your <a> tag isn’t really something that “visits” another URL. If that’s the case, then your event handler can add a class to the anchor. If your event handler does allow the anchor to move to the label, then I think it should work.