can't select the desired ul element - CSS - html

Question

Been reading and leaving out the advanced stuffs for future but this one seems to be fairly easy and straight forward but still can't get it.
<div class="sidenav">
<h3>Photo Archives</h3>
<ul>
<li><a href="../photos.html" class="selected" >2015</a>
<ul>
<li>Singapore</li><li>England</li>
</ul>
</li><li>2014
</li><li>2013
</li><li>2012
</li><li>2011
</li><li>2010
<ul>
<li>Philippines</li>
</ul>
</li><li>2009
</li>
</ul>
</div>
CSS bit here. This one is in primary css file.
.sidenav {
padding-top: 5%;
padding-left: 2%;
display: table-cell;
position: relative;
width: 20%;
vertical-align: top;
background-color: #c01f2c;
text-align: center;
/*border: 1px solid green;*/
}
.sidenav h3 { padding-bottom: 15px;}
.sidenav ul{ position:relative; }
.sidenav ul li:hover, .selected{
background-color: #2e2e2e;
}
.sidenav ul li a {
color:white;
display: block;
line-height: 3rem;
font-size: 1.25rem;
}
.sidenav ul li:hover ul {
display: block;
position: relative;
}
.sidenav ul li ul li:hover, .selected{
border-left: 5px solid white;
}
.sidenav ul ul {
position: absolute;
display: none;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
.sidenav ul ul a {
font-size: 1rem;
text-align: right;
padding-right: 10px;
Following CSS is exclusively for this page - 2015.html - which I have made reference to later than the main css file in the header.
.sidenav ul ul {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
Problem is I can't seem to select just the first ul which is first submenu with 2015.html. If I leave it as it is now, it will select both ul from 2015 and 2010. I want to select just the 2015 submenu. I've tried child, descendant, combinations all kind of selecting techniques but to no avail.
I know the thing I'm trying to do can be done with simple java but I don't want to jump to it yet. Want to keep it css and simple.

Answer 1

You may want to consider using first-of-type, assuming 2015 is always in the first child li of the menu ul:
.sidenav ul li:first-of-type ul {
// styles
}
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
With that said, given that the only valid children of a ul is li you can substitute with :first-child

Answer 2

Your rule .sidenav ul ul targets all ul sub-children.
You need to use the :first-of-type pseudo-class if you only want to target the first child
.sidenav ul ul:first-of-type

Answer 3

Try this out ,
As you need to select the first ul in the first sub menu
.sidenav > ul ul:first-child {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}

Answer 4

To make something dynamic use this:
.sidenav ul li a.selected + ul {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
Working fiddle: http://jsfiddle.net/alessiozuccotti/uannpmf6/