Group css selectors to reuse code

Question

Group css selectors to reuse code

Navigation

#1 by (7 votes)
#2 by (6 votes)

6

Given my and html and css respectively:

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

The idea is this: Format specific words in the text, note that it only changes if the color in the example. My question is: Can you group the 3 attributes that repeat themselves and make only one color change? Ex: Declare the 3 attributes as global and vary only the colors.

html css

asked by anonymous 10.11.2016 / 14:18

2 answers

6

An alternative is to use :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>

10.11.2016 / 14:43

Why does JavaScript allow you to use variables without declaring? What is Anko?

score 7 · Accepted Answer

use the class for this.:

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

.tipoPokemon span#fire{
    color: red;
}

.tipoPokemon span#water{
    color: blue;
}

If you prefer, you can use 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;
}

In the example above, I am using red and blue adopted by Material Design, and the result will be as follows:

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

.tipoPokemon #fire{
  color: #F44336;
}

.tipoPokemon #water{
  color: #2196F3;
}