CSS的特定元素：target？

Question

I'm having a problem with nesting :target pseudoclasses. I currently have a section with an anchor inside.

It's working correctly right now, when I click the anchor that links to #Current, it'll widen the area and display whatever is in #Current.

However, inside my #Current, I have another anchor that links to #Taask. When this happens, I don't want to set the width again, I just want to set display.

Here is my html and css code:

<section id="Current">
    <a href="#Current">Current Work</a>
    <div class="accordion_content">
        <ul id="current_projects">
            <li><a href="#Taask">Taask</a></li>
        </ul>
        <div id="Taask" class="project_info">
          Some Info
        </div>
    </div>
</section>

#Current:target {
  width: 780px;
}

This CSS :target declaration will work for ALL anchors inside my sections. Anyway to specify something like

#Current .firstclass:target {
    width: 780px;
}

and

#Current .secondclass:target {
    display: block;
}

Any suggestions?

For reference: www.redsquiggli.es

Basically trying to get the items inside my Current tab to do a different action than the accordion tabs when clicked.

Answer 1

From imakewebthings on Forrst: http://forr.st/~B9d

You cannot nest target selectors. Documents can only have one fragment identifier (thing after the #) so there can only be one target. A parent selector would work to keep the parent tab at the desired width, if such a selector existed, but it does not for good reason.