Tenho o seguinte código:
<ul class="menu">
<li><label for="menu1">Menu 1</label></li>
<li><label for="menu2">Menu 2</label></li>
<li><label for="menu3">Menu 3</label></li>
</ul>
<input type="radio" name="menu" id="menu1">
<div> Conteudo do Menu 1</div>
<input type="radio" name="menu" id="menu2">
<div> Conteudo do Menu 2</div>
<input type="radio" name="menu" id="menu3">
<div> Conteudo do Menu 3</div>
..e o CSS:
UL{
border: 0;
margin: -1px;
padding: 0px;
background-color: #eee;
font-weight: bold;
text-decoration: none;
font-size: 100%;
list-style: none;
line-height: 0.5;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
UL:after, UL:before{
content: '';
display: table;
clear: both;
}
UL LI{
border: 1px solid #cbc7bd;
list-style: none;
float: left;
position: relative;
top: 1px;
margin: 0 .2em 1px 0;
border-bottom: 0 !important;
padding: 0;
white-space: nowrap;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
UL LI label{
cursor: pointer;
padding: .5em 1em;
text-decoration: none;
float: left;
}
input[type=radio]{
height: 0;
width: 0;
position: absolute;
opacity: 0;
}
input:checked + div{
display: block;
}
div{
display: none;
border-width: 0;
padding: 1em 1.4em;
background: none;
margin-top: 0;
border-top: 0;
border: 1px solid #d9d6c4;
background-color: white;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
Que nada mais é do que um menu que mostra seu respectivo conteúdo com CSS puro. Está funcionando OK, só gostaria de modificar o CSS do LI selecionado, para ficar destacado que está selecionado, adicionando cor de fundo diferente por exemplo.
Sei que o CSS poderia ter um seletor :has ou :contains, pra fazer
LI:has(input:checked)
ou ainda um seletor "<", (o inverso do " Y > X" que seleciona o elemento X com pai Y), algo como:
LI < input:checked
Mas sei que isso ainda não existe no CSS. Alguém tem uma idéia de como pode ser feito atualmente ? De preferência sem usar JS. vlw