6

Dado o meu e html e css respectivamente:

<!DOCTYPE html>
<html>
 <meta charset="UTF-8"> 
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
    <title>Teste</title>
</head>
<body>
<!--<font color="red"><b><i>FIRE</i></b></font>-->
<div class="tipoPokemon">
Tipo <span id="fire">Fire</span><br>
Tipo <span id="water">Water</span><br>
</div>
</body>
</html>

CSS:

.tipoPokemon #fire{
    color: red;
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
}

.tipoPokemon #water{
    color: blue;
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
}

A ideia é a seguinte: Formatar palavras específicas no texto, reparem que só muda se a cor no exemplo. Minha dúvida é: Tem como agrupar os 3 atributos que se repetem e fazer uma alternação somente da cor ? Ex: Declarar os 3 atributos como globais e variar só as cores.

2 Respostas 2

7

use a classe para isto.:

.tipoPokemon span {
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
}

.tipoPokemon span#fire{
    color: red;
}

.tipoPokemon span#water{
    color: blue;
}

se preferir, você pode usar SCSS:

$vermelho: #F44336;
$azul: #2196F3;

%tipoPokemon {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
}

.tipoPokemon #fire{
    @extend %tipoPokemon;
    color: $vermelho;
}

.tipoPokemon #water{
    @extend %tipoPokemon;
    color: $azul;
}

No exemplo acima, estou usando o vermelho e o azul adotados pelo Material Design, e o resultado será o seguinte:

.tipoPokemon #fire,
.tipoPokemon #water {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
}

.tipoPokemon #fire{
  color: #F44336;
}

.tipoPokemon #water{
  color: #2196F3;
}
5
  • Funcionou, só uma dúvida: porque o span fica junto dos # e não há espaço ?
    – Roknauta
    10/11/2016 às 13:25
  • 1
    @Douglas separado significa que um elemento está dentro de outro, então o elemento #fire precisaria ser um descendente de span, enquanto junto, significa que se trata do mesmo elemento, então o span precisa ter id=fire 10/11/2016 às 13:30
  • Show, muito obrigado.
    – Roknauta
    10/11/2016 às 13:34
  • @Douglas também fiz um exemplo com SASS, você pode vir a gostar. 10/11/2016 às 13:37
  • Nossa, gostei da ideia, eu não conhecia o SASS, vou estudar ele e obrigado.
    – Roknauta
    10/11/2016 às 13:39
6

Uma alternativa é utilizar o :not():

.tipoPokemon span {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
}

.tipoPokemon span:not(#fire) {
  color: blue
}
<div class="tipoPokemon">
  Tipo <span id="fire">Fire</span><br>
  Tipo <span id="water">Water</span><br>
</div>

1
  • Obrigado funciona também.
    – Roknauta
    10/11/2016 às 13:44

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 .