Question

I’m building my website using only html and css. I’ve read several tutorials and did my research, but now I’m stuck in an area. I have created a menu on top of my page using ul and li and within the li are the links. the links themselves hold more info other than just the link. There is a span after them, and the span shows info that I will show after the user clicks on the link. I use a:focus for the info to show on the page. So the structure is:

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">
            blah blah blah
        </span></a>
    </li>
    <li><a href="#" tabindex="1">My artwork
        <span class="artwork_area">
            blah blah blah
        </span></a>
    </li>
</ul>

While it’s fine that the resume section works well with a:focus, and getting it to display on the page only after the user clicks on it, it will not work the same with ‘my artwork’ because I need to have more links inside that section. I know that it’s not allowed to have links nested inside other links, so how can I get the code to look like this?

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">blah blah blah</span>
        </a>
    </li>
    <li><a href="#" tabindex="1">My artwork</a><!--notice how the link ends here-->
        <span class="artwork_area">
            <p>blah blah blah
            <a href="assets/images/image1.jpg"><img src="assets/images/large_image1.jpg"/>Pic1</a>
            <a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
            </p>
        </span>
    </li>
</ul>

This is where I’m stuck. I can’t figure out how to make that span section appear without nesting it inside the link, but that won’t be acceptable to nest another link within it.
I’ve only been reading and putting to practice html and css for about 3 weeks, so I’m not that savvy yet. I would really like to do my website in only html and css as I see it is more convenient and loads much faster. I made a short youtube video to explain how it currently looks.

Answer 1

Short Answer

I had a quick look on the w3schools css selector reference and noted the element+element selector with example:

div+p -> Selects all <p> elements that are placed immediately after <div> elements

So I tried the following style and it works for your second example

a:focus+span {
   display:block;
}

And The Rest Of It

I’ve made an assumption on what your css looks like – perhaps you could edit your question to show this so that your example is complete.

But based on the html example you provided the following works for both cases.

<style>
li>span {
    display:none;
}

li>a:focus span {
    display:block;
}

li>a:focus+span {
    display:block;
}
</style>

Thinking about it if you were to make things consistent so that you never nested the span inside the action link, you could remove the a:focus span selector. Your resume list-item would become:

<li>
    <a href="#" tabindex="1">RESUME</a>
    <span class="resume">blah blah blah</span>
</li>

Also if you haven’t already done so you might want to give the list-item elements of your menu system a common class eg menu-item so as to constrain css further. Here the intent is to always show the last list-item Outside.

<style>
li.menu-item>span {
    display:none;
}

li.menu-item>a:focus+span {
    display:block;
}
</style>

...

<ul>
    <li class="menu-item">
        ... Resume 
    </li>
    <li class="menu-item">
        ... My artwork
    </li>
</ul>

<ul>
    <li>
        <a href="#" tabindex="1">Outside</a>
        <span class="resume">outside stuff which is always shown</span>
    </li>
</ul>

One final thing; I noticed that clicking on one of the image action links breaks the whole thing since the main action link is hidden again. From what I can see there’s no parent-from-child selector so I’m not sure at this stage how this will work for you. Anyways I think the element+element selector answers your specific question.