I've encountered an issue with nesting :target pseudoclasses. Currently, I have a section containing an anchor tag.
Right now, everything is functioning as intended; when I click on the anchor linking to #Current, it expands the area and displays the content within it.
However, within my #Current section, there is another anchor linking to #Taask. In this scenario, I do not wish to adjust the width again, but only change the display.
Below is the snippet of 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 :target declaration in CSS will work for all anchors inside my sections. Is there a way to specify something like
#Current .firstclass:target {
width: 780px;
}
and
#Current .secondclass:target {
display: block;
}
Any ideas or suggestions?
For more information, visit www.redsquiggli.es
In essence, I am attempting to make the items within my Current tab behave differently than the accordion tabs when clicked.