0

boa noite!

Eu estou passando por um problema que está quebrando minha cabeça por dias. Eu tento deixar a cor da letra no campo ativo do tab, porém quando eu passo (color: #fff) para a classe especifica, ela não muda, porém ela reconhece o background passado na mesma classe. Tentei mudar varias classes, porém sem sucesso, como mostra a imagem.

Vocês poderiam me ajudar com alguma dica

Está é a página: https://www.colegiofreinet.com.br/duvidas-frequentes2/

inserir a descrição da imagem aqui

Obrigado desde já :)

2 Respostas 2

2

Tem que trocar a cor do a quando a li estiver com a classe .ui-state-active

.ui-state-active a {
    color: red;
}

inserir a descrição da imagem aqui

4
  • Obrigado meu amigo, isso resolveu o meu problema. Não querendo me aproveitar da suia boa vontade, mas eu fiquei sem entender o porque ela não respeitou o parametro da font, mas respeitou o do background ? Commented 9/05/2019 às 23:30
  • 1
    @MoisesFausto agora eu estou no celular e não da pra.inspecionar, mas acredito seja Pq o bg esta na li já o color na A. E essa com do A pode estar sendo herdada do body ou algum outra parte do CSS por isso fiz a regra pegando o estilo da Li e do A que esta dentro dela para ser mais especifico
    – hugocsl
    Commented 9/05/2019 às 23:38
  • 1
    Isso faz sentido, realmente tinha reparado que o color na A, vinha herdado e quando eu alterava, alterava todas as outras. Você foi muito perspicaz @hugo, agradeço novamentye pela ajuda. Commented 9/05/2019 às 23:41
  • @MoisesFausto estamos aqui para ajudar, força nos estudos que logo vc fica fera! Abs
    – hugocsl
    Commented 9/05/2019 às 23:56
1

Moises Fausto eu irei responder a sua pergunta, porém antes eu gostaria de deixar bem claro algumas coisas para você.

O seu site não está seguindo nenhuma convenção de boas práticas, code clean, design patterns, metodologias entre outros, alguns problemas que eu analisei apenas inspecionando o código pelo browser foram o seguinte:

1) Na tag <head> você está inserindo <script> onde o local deles são dentro da tag <body> e no final de todas as marcações de texto da tag. O Por que disto? Todo javascript executa de modo síncrono por padrão, isso significa que quando a tag <script> é encontrada, o browser não renderiza mais nada enquanto este script não for carregado e executado.

Inserir um <script> no <head> garante que ele seja executado antes de qualquer elemento inserido na tag <body>, a desvantagem é que o usuário só irá visualizar uma página em branco até que o script termine de executar. Logo, inserir um <script> no final do <body>, por outro lado, permite que o conteúdo antes dele já seja exibido ao usuário, sem ter de esperar cada mínimo detalhe estar pronto antes de ler o conteúdo da página, a desvantagem é que se o seu <script> modifica significativamente o conteúdo e/ou sua apresentação e funcionalidade o usuário irá visualizar uma página mal formatada antes que o script altere-a.

2) Segue o mesmo padrão de resposta para a tag <style> dentro da tag <head>. Quando você faz isto o seu <style> é denominado de "CSS Interno", as .class e #id que são utilizadas para se referir a um ou muitos elementos, neste caso só poderão ser ativos nesta página específica, porém o problema não é somente este. Desta forma que esta todo o código dentro de <style> será baixado cada vez que a página for carregada, a desvantagem é que isto aumenta o tempo de carregamento da página e afeta apenas uma página com os estilos, sem poder reutiliza-los.

O correto seria não utilizar o "CSS Interno" e nem o "CSS Inline", somente o "CSS Externo". Com o "CSS Externo" você tem a vantagem de uma estruturação mais limpa e reutilização do código, velocidade de carregamento mais rápido entre outros.

Existem diversos outros problemas, mas estudando e praticando é que você irá lapidar suas habilidades, existem diversos assuntos a serem estudados, porém irei deixar os mais clássicos abaixo:

1) HTML5 STYLE GUIDE

2) JAVASCRIPT STYLE GUIDE

3) MÉTODOLOGIA DE ESTRUTURAÇÃO CSS (BEM)

Sem mais delongas, vamos a resposta da sua pergunta...

Você está utilizando diversas bibliotecas tome cuidado com isto também, um dos motivos do cuidado é porque você não tem o total controle do que está ocorrendo, quando vai ocorrer e no que vai ocorrer, um desses exemplos é o da sua resposta. Preste atenção agora..

Você possui a seguinte estrutura HTML:

    <li role="tab" tabindex="-1" class="ui-tabs-tab ui-state-default ui-tab ui-corner-left" aria-controls="tabs-11" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false">
        <a href="#tabs-11" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Ensino Fundamental</a>
    </li>

Observe o seguinte: O seu hyperlink <a> está dentro da tag <li> e a tag <li> possui as seguintes nomenclaturas de .class: ui-tabs-tab ui-state-default ui-tab e ui-corner-left. Como não sabemos o verdadeiro funcionamento das mesmas, para que não ocorra nenhum problema o certo seria o seguinte:

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active a {
    color: INSIRA A COR AQUI (NOME, RGB, HEX, ENTRE OUTROS);
}

Pois no caso você estará modificando somente nos tabs e navs verticais e quando o <li> que está dentro deste contexto estiver com o ui-tabs-active irá modificar o elemento <a> e em mais nenhuma outra região.

4
  • Ual Thiago, muito bom sua explicação. Entendi perfeitamente o problema de boas práticas, vou concertar ou tentar, pois esse site quando peguei ja estava assim. Commented 17/05/2019 às 17:31
  • Com certeza foi muito esclarecedor, obrigado! Commented 17/05/2019 às 17:31
  • @MoisesFausto obrigado e agradeço! Caso puder deixar a minha resposta como a correta, agradeceria.
    – user148754
    Commented 17/05/2019 às 17:33
  • Esse site ai ta uma tristeza, ontem tentei melhorar algumas coisas, usando minificação de css e JS e tamanho de imagem, mas bugou o site todo. Acho que se mudar não vai ser boa ideia, seria melhor mudar alguns parametros ou refazer ele, aproveitando algumas coias. Commented 17/05/2019 às 17:35

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 .