Jump to content
peximaximum

Colocar atributo em elemento que já contém um atributo específico

Recommended Posts

Bom dia!

Me deparei com um problema no trabalho hoje de manhã e não consegui solucionar, nem procurando sobre o mesmo.

No editor do meu site às vezes, ao clicar para o texto selecionado ficar em negrito, ao invés de ele inserir o texto entre a tag <b>, ele coloca por css direto na linha com span, usando font-weight, ficando da seguinte forma:

<span style="font-weight: 700;">TEXTO</span>

E no meu arquivo de css tem o seguinte atributo para que os textos em negrito fiquem na cor verde: 

#box-description > span:first-child > p > b {
    color: #4aab25 !important;
}

A minha dúvida é: como posso fazer para que todo texto dentro de um span com font-weight: 700 fique com esse atributo acima igual o que está na tag <b>? Eu tentei das seguintes formas e não deu certo:

  • span[style="font-weight: 700"]
  • span[font-weight="700"]

 

Fico no aguardo de um auxílio de quem puder me ajudar :D

 

Obrigado.

Share this post


Link to post
Share on other sites

Você quer que apenas as palavras em negrito fiquem verde. É isso? Tem alguma palavra sem estar em negrito que você quer que não fique verde?

Share this post


Link to post
Share on other sites

Você pode colocar uma classe com o mesmo nome nos spans, por exemplo:

 

<span class="span_negrito">TEXTO</span>

No css:

 

.span_negrito {    
    font-weight: 700;
    color: #4aab25 !important;
}

 

Todo o span com a classe "span_negrito" vai estar em negrito e com a cor verde.

Share this post


Link to post
Share on other sites

Sim, fazer isso dessa forma seria fácil. A questão é que não é só eu que cadastra produtos, e o resto do pessoal que cadastra não entende de CSS, então se isso acontecer (o CSS estiver inline) irá ficar um padrão diferente das outras descrições de produtos, pois ele terá uma prioridade maior sob o CSS externo.

O que eu gostaria é que quando o font-weight: 700 estiver inline, junto com o span, ele ganhe o atributo da cor verde.

Por exemplo:

Sempre que o elemento span conter o atributo font-weight:700 inline, mudar a cor do texto contido dentro do span para verde.

Share this post


Link to post
Share on other sites

Encontrei a solução pro problema. Obrigado pela ajuda Luiz! Vou deixar a solução abaixo se alguém tiver a mesma dúvida:

 

Usei o código da seguinte forma para dar certo:

#box-description > span:first-child > p > [style*="font-weight: 700"] {
    color: #4aab25 !important;
}

O problema que eu estava tendo era em colocar o elemento span antes do atributo, da seguinte forma:

#box-description > span:first-child > p > span [style*="font-weight: 700"] {
    ...
}

Ao tirar o elemento span funcionou!

 

Pode ser que seja necessário também criar outra regra caso no css inline não esteja font-weight: 700. De uma forma mais completa, pode ser usado da seguinte forma como exemplo:

#box-description > span:first-child > p > b,
#box-description > span:first-child > p > [style*="font-weight: 700"],
#box-description > span:first-child > p > [style*="font-weight:700"],
#box-description > span:first-child > p > [style*="bold"],
#box-description > span:first-child > p > [style*="bolder"] {
    color: #4aab25 !important;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By xdxddxd
      ao clicar em um botão eu gostaria de exibir um confirm no site, mas eu gostaria de Mudar de "OK" Para "Home" e "Cancelar" para "Estoque".
      isso usando javascript puro, alguem pode me ajudar ?
      já agradeço de já.
      tem que usar algum plugin no site ou tem como fazer puro mesmo.
      se quiser deixar só um link com o tutorial eu já agradeço, porém não achei nenhum do jeito que eu quero no google.
    • By Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By Sapinn
      Salve salve.
      Mas uma dúvida minha aqui É o seguinte tenho uma pagina que tem um texto de um usuario e eu gostaria de imprimir esta página usando javascript. Sei que usando o window.print() da pra imprimir o problema é que não fica organizado. Então eu gostaria de imprimir outra pagina na qual eu organizaria melhor o  texto e outra informações do usuario para impressão. Alguém tem algum codigo ae que faça isso?
       
      Desde já agradeço.
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By joicitias
      Olá, 
      Estou aprendendo a programar ainda, e preciso fazer com que ao clicar em um botão o  conteúdo selecionado de um select seja copiado para uma textarea. 
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.