2

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

1
  • vc nao quer via JS, e via PHP?
    – user148170
    Commented 19/08/2019 às 19:55

2 Respostas 2

2

Tem como fazer sim, mas vc precisa mudar o seu HTML, não só o CSS, vc tem que no HTML colocar os radio buttons antes da UL que tem as labels dentro. Assim quando vc clicar na label com o for para o radio vc consegue atingir tudo que está abaixo, assim atingindo a própria label clicada e trocar a cor dela, deixando ela "ativa"

#menu1:checked ~ .menu1,
#menu2:checked ~ .menu2,
#menu3:checked ~ .menu3 {
    display: block;
}

#menu1:checked ~ ul [for="menu1"],
#menu2:checked ~ ul [for="menu2"],
#menu3:checked ~ ul [for="menu3"] {
    background-color: red;
}

Repare que agora eu não uso mais o seletor + , vou osar o ~ no lugar, e tb preciso que cada tab tenha uma classe, veja abaixo para entender melhor.

Código da imagem:

inserir a descrição da imagem aqui

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;
}

#menu1:checked ~ .menu1,
#menu2:checked ~ .menu2,
#menu3:checked ~ .menu3 {
    display: block;
}

#menu1:checked ~ ul [for="menu1"],
#menu2:checked ~ ul [for="menu2"],
#menu3:checked ~ ul [for="menu3"] {
    background-color: red;
}

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;
}
<input type="radio" name="menu" id="menu1">
<input type="radio" name="menu" id="menu2">
<input type="radio" name="menu" id="menu3">

<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>

<div class="menu1"> Conteudo do Menu 1</div>

<div class="menu2"> Conteudo do Menu 2</div>

<div class="menu3"> Conteudo do Menu 3</div>

4
  • 1
    Excelente resposta! 👏👏👏👏👏👏👏👏 Commented 22/08/2019 às 15:16
  • 1
    @AugustoVasques valeu a força meu caro 💪 Nesse caso como a ordem do radio não importa muito, colocando ele acima de todos os irmãos e filhos fica fácil resolver o problema :D
    – hugocsl
    Commented 22/08/2019 às 15:24
  • 2
    Eu me incomodei com o fato de que talvez essa resposta não receba muitos up vote, digo isso porque o leitor para ficar surpreso, assim como fiquei, deve entender o quão foi engenhoso o uso desse seletor #menu1:checked ~ ul [for="menu1"], #menu2:checked ~ ul [for="menu2"], #menu3:checked ~ ul [for="menu3"] { background-color: red; } e ter consciência do quão limitadoras foram as condições impostas pela pergunta. Commented 22/08/2019 às 15:38
  • 1
    @AugustoVasques é verdade, os seletores, ordem de elementos etc, são "maldades" que a gente vai pegando com tempo. A vantagem do JS nesse caso é que quando escalar, por exemplo imagine 10 tabs, o código CSS vai ficar enorme, maior do que seria com JS... em projetos complexos tem que ver a melhor opção...
    – hugocsl
    Commented 22/08/2019 às 15:43
-1

O CSS "Cascading Style Sheets", como o nome já diz, funciona em cascata onde o filho herdar valores do seu ancestral. Logo um elemento parente não pode ter propriedades alteradas com relação ao seu herdeiro.

Acredito que até as versões atuais,é possivel apenas parente para herdeiro. Se queres de fato aplicar esse tipo de alteração, indo na contra mão do proporto pelo CSS tera de usar javascript. Acredito que esse artigo possa ser últil na hora de fazer esse trabalho com JS: para-que-servem-os-atributos-data-target-e-data-toggle

Ou procure sobre variáveis em CSS, podem ser úteis também.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .