Specific elements for CSS :target?
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
#Curre开发者_JS百科nt .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.
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.
精彩评论